HTML Page Structure: Doctype, Head and Body Explained

Every HTML page, from a one-line test to a huge shop, shares the same skeleton. Once you know it, you can read almost any page.

1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- information about the page -->
  </head>
  <body>
    <!-- the visible page -->
  </body>
</html>

The doctype

The first line, <!DOCTYPE html>, tells the browser to read the page using modern rules. Without it, browsers fall back to an old “quirks mode” that renders some things differently. The doctype is not a tag and it is not case sensitive, but you should always include it.

The html element

<html> is the root element. Every other element lives inside it. Put the lang attribute here. It tells screen readers which language to pronounce, and helps browsers offer translation.

The head: information about the page

Things inside <head> are not shown as part of the page. The most common are:

The body: what visitors see

Everything people can read, click or watch goes inside <body>. You will spend most of your time here.

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Opening hours | Juniper Books</title>
</head>
<body>
  <h1>Opening hours</h1>
  <p>Monday to Saturday, 9:00 to 18:00.</p>
</body>
</html>

You now know the skeleton. In the next chapter you will meet the building blocks that go inside it, starting with HTML Elements.