Your first document

The document structure

Build a complete HTML document with the doctype, root html element, head metadata, and visible body content in the right places.

7 minute lesson

~~~

A complete HTML page starts with this structure:

HTML is a tree. Every element has a place in it.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>My first page</h1>
    <p>Hello from an HTML document.</p>
  </body>
</html>

The html element is the root element. Every other element belongs inside it.

Inside html there are two main parts:

head contains information about the document
body contains the document people see and use

A document has one html, one head, and one body element.

Notice the indentation. Elements inside html are indented by two spaces. Elements inside head and body are indented again.

Indentation does not normally change what the browser displays. It shows the nesting clearly to humans, which makes errors much easier to spot.

Replace the fragment in your index.html file with this complete document. Save and refresh. The visible result stays almost the same, but the browser now has a properly described page.

Quick check

Result

You got of right.

Lesson completed