The document skeleton

Build the skeleton of an HTML document with <!DOCTYPE>, <html>, <head> and <body>.

What is the document skeleton?

Every HTML document starts with the same basic skeleton: the <!DOCTYPE html> declaration, the <html> root tag, the <head> header section and the <body> content section. These four pieces tell the browser 'this is an HTML document, its shape is this'.

Without the skeleton the browser may misread the document. So it is a good habit to start every HTML page with the same skeleton.

html, head and body

The <html> tag wraps the whole document; it is the root tag. Inside it there are two sections: <head> carries information about the page and is not shown to the user; <body> carries all the visible content.

These three tags appear in every HTML document. <head> holds the title and settings; <body> holds everything the user sees on the page.

The full structure

The full skeleton is this: first <!DOCTYPE html>, then <html> opens. Inside it comes <head> then <body>; both are closed. Finally </html> is written.

Keeping this order matters for the document to be read correctly. head holds settings, body holds everything the user sees.

Exercise Build the document skeleton

Write a full HTML document skeleton: the <!DOCTYPE html> declaration, and the <html>, <head> and <body> tags all in the right order and closed.

Show example solution

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Test yourself

What does <!DOCTYPE html> do?
- Declares the document is HTML
- Adds a heading tag
- Sets the page's background
- Clears the browser's cache
Show answer

Declares the document is HTML — Correct. <!DOCTYPE html> tells the browser the document is modern HTML.

Close the html tag

<html>
  <head></head>
  <body></body>
____

Show answer

<html>
  <head></head>
  <body></body>
</html>

Match each part to its role

<!DOCTYPE html>

Document type declaration
<html>

Document root
<head>

Page information
<body>

Visible content

Next lesson: Head and meta tags

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies