Understanding the HTML Document Structure

What is the smallest file that counts as a complete and correct web page? It is shorter than you might expect. Here is the index.html file you saved in the previous lesson:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maya's Bakery</title>
  </head>
  <body>
    <h1>Maya's Bakery</h1>
    <p>Fresh bread every morning, from 7 a.m.</p>
  </body>
</html>

This is the file before you added the second paragraph. When you open it in your browser, the browser shows this:

Browser tab:   Maya's Bakery

Maya's Bakery                              (large, bold heading)
Fresh bread every morning, from 7 a.m.

Every line before the <h1> exists to tell the browser how to read and show the page. The rest of this lesson follows those lines in the order the browser reads them.

The Doctype

The first line, <!DOCTYPE html>, is not an element. It is a declaration: a short instruction to the browser about the whole file. It tells the browser to follow the current HTML standard.

Without it, browsers switch to quirks mode, in which they imitate the mistakes of very old browsers so that very old pages still look the way they used to. In quirks mode some sizes and spacing are calculated differently, so a new page can look wrong for no visible reason. The doctype does not name an HTML version, because HTML no longer has versions. It is always the very first line, and it is not case sensitive, although <!DOCTYPE html> is the usual spelling.

The <html> Element

The <html> element wraps everything else in the file. It is called the root element, because every other element sits inside it, the way every branch of a tree grows from one root. Its end tag, </html>, is the last line of the file.

The attribute lang="en" states that the page is written in English. A screen reader uses it to choose the right pronunciation, and a browser uses it to offer translation. For a page in French you would write lang="fr", and for Urdu lang="ur". The next chapter explains attributes in detail; for now, an attribute is extra information written inside the opening tag.

The <head> Element

The <head> element holds information about the page, not content for the reader. Nothing inside it appears in the page itself. This document's head contains three elements.

<meta charset="utf-8"> sets the character encoding. The file on disk is a sequence of numbers, and the character encoding is the rule that turns those numbers back into letters. UTF-8 covers the letters of every language, as well as symbols such as the euro sign. If this line is missing, some browsers guess wrongly, and a word such as "café" can appear as café. Put this line first in the head, so the browser knows the rule before it reads any other text.

The viewport line makes the page fit a phone screen. Without it, a phone pretends that its screen is as wide as a desktop monitor and shrinks the whole page, so the text becomes too small to read. With width=device-width, initial-scale=1, the phone lays out the page at its real width. The chapter on meta tags explains this line further. Until then, copy it into every page.

<title> names the page. The browser shows the title on the tab, uses it as the default name for a bookmark, and search engines usually show it as the link text in their results. A screen reader announces it when the page opens. The title is required, so a page without one is not valid HTML. Choose a title that describes this page in particular, such as "Opening Hours, Maya's Bakery", rather than the same title on every page of a site.

The <body> Element

The <body> element holds everything the reader sees: headings, paragraphs, images, links, lists, tables and forms. It comes after the head, and both of them sit directly inside <html>. Every element that later chapters teach goes inside the body, except the few that describe the page and belong in the head.

The Document Tree

Every element except <html> sits inside another one, and the browser keeps that arrangement when it builds the document tree. The <html> element is at the top, with two children, <head> and <body>. Each of those has children of its own.