Skip to main content

Lesson 2 of 3

Page Structure

Build a complete document with metadata and a clear content hierarchy.

Lessons in this tutorialIntroduction to HTMLPage StructureElements and Attributes

A complete HTML page separates document metadata from visible content. The head explains the document to the browser; the body contains what people interact with.

Minimal HTML document
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page title</title>
  </head>
  <body>
    <main>
      <h1>Page heading</h1>
    </main>
  </body>
</html>

A useful hierarchy

  • Use one descriptive page-level heading.
  • Nest sections according to the content, not the desired font size.
  • Use landmark elements such as header, nav, main, aside, and footer when they describe the region.
  • Set the document language so assistive technology can pronounce content correctly.