Understand the basic HTML document

One idea at a time

You made a page in the first lesson. Now look at the container around its words. A complete document gives the browser information about the page as well as content to display. Indentation helps you see which elements are inside other elements; the spaces are for people reading the code.

The doctype at the beginning asks the browser to use modern standards mode, the browser’s normal rules for interpreting today’s HTML. It is a declaration, not an element wrapping content. The html element contains the document. Its lang attribute identifies the language of the text, helping tools such as screen readers (software that speaks or presents page content in braille) choose a pronunciation.

Inside html, head holds information about the document and body holds the page content. The title belongs in head and names the browser tab. An h1 belongs in body and introduces the visible page. Changing one does not automatically change the other.

Read the document as containers

Walk through an example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My garden notebook</title>
  </head>
  <body>
    <h1>Welcome to my garden</h1>
    <p>I am growing basil.</p>
  </body>
</html>

Read the nesting from outside inward. html contains head and body as siblings. head contains the two settings and the title. body contains the heading and paragraph. The closing body and html tags finish the document in the reverse order from which those containers opened. This is the document shell you can reuse for later HTML lessons.

See it happen: try a small change

<head>
<title>Garden notebook</title>
</head>
<body>
<h1>Welcome to my garden</h1>
<p>I grow basil.</p>
</body>

Understand the settings without memorizing everything

charset tells the browser how text is encoded. UTF-8 supports letters and symbols from many languages. The viewport setting asks mobile browsers to use the device width for layout. It does not make a fixed-width design responsive by itself; you will learn about flexible layouts in CSS.

meta is a void element, so it has no content or closing tag. title has text content and needs its closing tag. Later lessons introduce descriptions and sharing information in head. You can keep the two settings above while concentrating on the body for now. Do not add a stylesheet or script until you need one.

Try it in your browser

Save a copy of your first page as about.html so the original stays intact. Compare head and body in the editor: they are siblings, meaning both sit directly inside the same parent, html. Change only title, save, and refresh; then change only h1. Check the tab and page separately.

A common wrong turn

Putting a heading in head is incorrect even if a browser repairs the document and shows it. Browsers try to recover from mistakes, so appearance alone does not prove that the source has the intended structure. Check the nesting and the location of the element in your editor.

Change one thing

Change only the tab title and refresh. Then change only the heading. Explain which part of the document owns each result before moving on.

Go to the source

• MDN: Understand the basic HTML document ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.