HTML document structure explained: a practical beginner guide

Every HTML page is built on the same skeleton. It starts with a doctype, then an <html> element that holds two parts: the <head>, with information about the page, and the <body>, with everything people actually see. Here is the whole thing:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sam’s bakes</title>
  </head>
  <body>
    <h1>Sam’s bakes</h1>
    <p>Fresh bread every Saturday.</p>
  </body>
</html>

Open that in a browser and you get a page with a heading and a sentence, and “Sam’s bakes” on the browser tab. Those twelve lines are the starting point for every page you will ever write. This guide explains each line, how to organise what goes inside the body, what browsers do when parts are missing, and the structural mistakes beginners make most.

The skeleton, line by line

<!DOCTYPE html>

The very first line tells the browser this is a modern HTML page. Without it, browsers switch into an old “quirks mode” that copies the odd behaviour of browsers from the 1990s, and some of your CSS will act strangely. It is not a tag and never has a closing partner.

<html lang="en">

This element wraps everything else on the page. The lang attribute says which language the page is written in. Screen readers use it to pick the right pronunciation, and translation tools use it to know what they are translating from. For British English you can write lang="en-GB".

<head>

The head holds information about the page rather than the page itself. Nothing inside it appears in the page area of the browser window.

<meta charset="utf-8">

This says which character set the page uses. UTF-8 covers almost every character in every language, plus symbols like £ and emoji. If the browser has to guess, characters like £ or é can come out as gibberish. Put it near the top of the head.

<meta name="viewport" ...>

This line tells phones to show the page at the phone’s real width. Without it, most phone browsers pretend the screen is about 980 pixels wide, as if it were a desktop, and shrink everything to fit. The page looks tiny and people have to pinch to zoom.

<title>

The title appears on the browser tab, in bookmarks, and usually as the blue link in search results. Every page needs one, and each page on a site should have its own.

<body>

Everything visible goes in the body: headings, paragraphs, pictures, links, forms and menus. There is only ever one body.

A page is a tree

Elements sit inside other elements, like boxes inside boxes. An element inside another is called its child, and the outer one is its parent. In the skeleton above, <head> and <body> are both children of <html>, and <h1> is a child of <body>.

The browser turns this nesting into a tree, called the DOM, which is what CSS styles and JavaScript changes. Our guide to selecting DOM elements shows how JavaScript finds its way around that tree.

The indentation in the example is only for people. The browser would read the page the same way if every line started at the left edge. Indent anyway: it makes the tree easy to see.

Organising the body with landmarks

A real page has more than a heading and a paragraph. HTML has special elements, called landmarks, that mark out the main regions of a page:

<body>
  <header>
    <p>Sam’s bakes</p>
    <nav>
      <a href="/">Home</a>
      <a href="/menu">Menu</a>
    </nav>
  </header>
  <main>
    <h1>Fresh bread every Saturday</h1>
    <p>Sourdough, rye and seeded loaves, baked that morning.</p>
  </main>
  <footer>
    <p>Market Street, open 8am to 1pm.</p>
  </footer>
</body>

• <header> holds the top of the page: usually the name or logo, and often the menu.
• <nav> wraps the main menu, so people can find their way round the site.
• <main> holds the content that is unique to this page. Use one visible <main> per page.
• <footer> holds the bottom of the page: contact details, small print and extra links.

Landmarks look exactly like plain boxes until you style them. Their value is in what they mean. Screen reader users can jump straight to the main content or the menu, and search engines get a clearer picture of what each part of the page is for.

Headings give the outline

Inside <main>, headings form the outline of the page, like the contents list of a book:

• One <h1> for the main heading of the page.
• <h2> for each section.
• <h3> for parts of a section, and so on down to <h6>.

Do not skip levels, like jumping from <h2> to <h4>, and do not pick a heading because of its size. Size is a job for CSS.

Where CSS and JavaScript go

Both are connected in the head:

<head>
  <meta charset="utf-8">
  <title>Sam’s bakes</title>
  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
</head>

The <link> loads a stylesheet. The defer on the script makes the browser wait until the whole page has been read before running it, so your JavaScript can find every element. Without defer, a script in the head runs before the body exists.

What browsers do when parts are missing

Browsers are forgiving. If you leave out <html>, <head> or <body>, the browser quietly adds them when it builds the page. This file, with no skeleton at all, still shows a page with a title on the tab:

<title>Tiny page</title>
<p>Hello!</p>

So why bother writing the skeleton? Because some parts cannot be guessed. Without the doctype you get quirks mode. Without the viewport line, phones show a shrunken page. Without lang, screen readers may read your words with the wrong accent. And a page that relies on the browser’s guesses is harder for you, and the next person, to read.

Common mistakes

Visible content in the head

Putting a heading or paragraph inside <head> does not work as you might expect. The browser ends the head early and moves that content into the body, and anything after it that belonged in the head can end up in the wrong place too.

Forgetting a closing tag

Leave out a </div> or </ul> and the browser has to guess where the element ends. It often guesses differently from you, so later parts of the page end up inside the wrong parent. If your layout goes strange halfway down, look for a missing closing tag just above.

Using headings for size

Picking <h4> because it is a nice small size breaks the outline that screen readers and search engines rely on. Choose the level that fits the structure, then change the size with CSS.

Missing the viewport line

If your page looks fine on a laptop but tiny on a phone, the viewport meta tag is the first thing to check.

More than one body or main

A page has one <body>, and one visible <main>. Two of either confuses browsers, screen readers and you.

How to check your structure

• The browser’s developer tools. The Elements tab in Chrome or Edge, or the Inspector in Firefox, shows the tree the browser actually built. If something sits in the wrong parent, you will see it there.
• The W3C’s free Markup Validation Service. Paste your HTML in and it lists every structural problem it finds, with line numbers.

A short exercise

This page has four structural problems. Find them, then rewrite it properly.

<html>
  <head>
    <h1>My first page</h1>
  </head>
  <body>
    <p>Welcome to my page.</p>
  </body>
</html>

One possible answer

The problems: there is no doctype, <html> has no lang, the head has no <title> or <meta charset>, and the <h1> is in the head instead of the body. A fixed version:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My first page</title>
  </head>
  <body>
    <main>
      <h1>My first page</h1>
      <p>Welcome to my page.</p>
    </main>
  </body>
</html>

Related reading

• Selecting DOM elements in JavaScript, for what JavaScript does with the tree your HTML makes.
• JavaScript console.log() explained, which covers opening your browser’s developer tools.

Your next step

The skeleton is the first thing every web developer learns and the thing they type most often. Gwecode’s HTML Level 1 builds it with you lesson by lesson, from your first tag to landmarks, menus, tables and forms, and its level check has you build an about-me page of your own. Every lesson is free and runs in your browser with a live preview. Create a free account to keep your progress, then start with the page skeleton lesson below.

questions