Skip to content
Skip to lesson

7 min read

Module 6 of 7, lesson 1 of 5. 0 of 23 lessons done.

American Corners

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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Neighbourhood Garden</title>
  </head>
  <body>
    <h1>Welcome to our garden</h1>
    <p>Everyone on the street is welcome to help.</p>
  </body>
</html>

The first line, <!DOCTYPE html>, tells the browser this is a modern HTML page, and <meta charset="utf-8"> makes sure letters like ë and ç display correctly. Then three parts matter. 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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <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

  1. HTML is often called a markup language rather than a programming language. Based on what it does, why is that distinction fair?
  2. 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?
  3. 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 identifies whether a lesson comes from a taught programme or was authored for this pathway. 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. Who made what

Found something unclear, outdated or improvable? Suggest an improvement