🎓 A1Learner
🔍

HTML Document Structure

Document structure is the fixed order of sections in an HTML page. The head comes first and the body comes second, both inside the html element.

The whole skeleton

Every page follows this shape. The body is empty here, so nothing appears on screen.

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

What goes in the head

The head holds the title. Later lessons add more information there.

<head>
<title>Our Town</title>
</head>

What goes in the body

The body holds headings and paragraphs. Their text appears in order.

<body>
<h1>Our Town</h1>
<p>Our town has a river.</p>
</body>

Example

<!DOCTYPE html>
<html>
<head>
<title>Our Town</title>
</head>
<body>
<h1>Our Town</h1>
<p>Our town has a river.</p>
<p>Boats pass every morning.</p>
</body>
</html>

Key points

  • html element: the outer element that wraps head and body
  • head element: the section for information about the page
  • body element: the section for content shown on the page
  • Use the title element inside the head to name the page
  • The doctype line stands before the html element.

In this example, the doctype line opens the document. The html element wraps both main sections. The head holds the title Our Town. The body holds a heading and two paragraphs. The browser displays the body content in order.

Note

Indentation makes nested sections easier to read. The browser does not require it.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Where does the title element belong?