HTML: the structure of a page

A page is structure, not decoration

Every web page you have ever opened is, underneath, a plain text file. HTML, short for HyperText Markup Language, is the set of labels that turn that text into a page a browser can lay out. It is worth saying clearly, because it surprises people: HTML is not a programming language. It has no loops, no if, no variables. It does one job, and does it well. It describes the structure of a page: this part is a heading, this part is a paragraph, this part is a list.

Think of it like the frame of a house before the paint. HTML decides where the rooms are. Later lessons add the styling and the behaviour. For now, structure is the whole game.

Tags: the building blocks

You mark up structure with tags. A tag is a keyword wrapped in angle brackets. Most come in pairs: an opening tag and a matching closing tag with a slash, and the content sits between them.

<p>This is a paragraph.</p>

Here <p> opens a paragraph and </p> closes it. The browser reads everything between them as one paragraph. A few tags stand alone and need no closing partner, because they mark a single spot rather than wrapping content. <hr> draws a horizontal line, and <br> forces a line break. These are called empty tags.

The trick that trips up beginners is nesting. Tags go inside other tags, and they must close in the reverse order they opened, like closing a set of brackets. Open A, open B, close B, close A. Never cross them.

The skeleton every page shares

A complete page has a fixed outer shape. Learn it once and you will type it for years.

<html>
  <head>
    <title>Neighbourhood Garden</title>
  </head>
  <body>
    <h1>Welcome to our garden</h1>
    <p>Everyone on the street is welcome to help.</p>
  </body>
</html>

Three parts matter here. The whole document lives between <html> and </html>. The <head> holds information about the page rather than content you see in it; the <title> inside it becomes the name shown on the browser tab. The <body> holds everything the visitor actually sees. If it is not inside <body>, it does not appear on the page.

Headings and paragraphs

Inside the body, your two workhorses are headings and paragraphs. Headings come in six sizes, from <h1> (largest, the main title) down to <h6> (smallest). They are not just big text: they signal importance and order, which helps both readers and search engines understand the page.

<h1>Weekend plan</h1>
<h2>Saturday</h2>
<p>We plant tomatoes in the morning.</p>
<h2>Sunday</h2>
<p>We water everything and rest.</p>

Use one <h1> for the page's main title, then <h2> for its sections, and so on down. Do not pick a heading level because of how big it looks; pick it because of what it means. Styling the size comes later, with CSS.

A worked example: a tiny event page

Suppose you want a small page announcing a book swap at the local library. Start from the skeleton, give it a sensible title, then fill the body with one main heading, a short paragraph, and a section heading.

<html>
  <head>
    <title>Book Swap</title>
  </head>
  <body>
    <h1>Book Swap this Friday</h1>
    <p>Bring a book you have finished and take one you have not.</p>
    <h2>Where</h2>
    <p>The reading room, second floor.</p>
    <hr>
    <p>Bring as many books as you like.</p>
  </body>
</html>

Save that as a file ending in .html, open it in any browser, and you have a real web page. Notice there is not a single line of programming in it. You described the structure, and the browser did the drawing. That separation, structure first and behaviour later, is the idea the rest of this module is built on.

Check yourself

HTML is often called a markup language rather than a programming language. Based on what it does, why is that distinction fair?
What is the difference between what goes inside <head> and what goes inside <body>, and where would a heading you want the visitor to read belong?
You see <br> used without any closing </br>. Why is that correct, and how does it differ from a tag like <p>?

Where this lesson comes from

Built from

Data Structures and Algorithms: web development session

alphaPlan courses are built from taught programmes rather than invented for the web. Where a claim rests on an outside standard or a reported case, it is named above so you can check it rather than take our word for it.

This course was developed by alphaPlan Center from programs delivered in partnership with the American Corners network.

Found something unclear, outdated or improvable? Suggest an improvement