Printing and PDF export are disabled for this content. View it online at Full Stack Learning Simplified.

HTML Document Structure

Every HTML page follows the same skeleton. Getting it right matters for rendering, SEO, and accessibility.

The basic skeleton

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome to my page.</p>
  </body>
</html>

Part	Purpose
`<!DOCTYPE html>`	declares HTML5 (must be first)
`<html lang="en">`	root element; `lang` aids screen readers & SEO
`<head>`	metadata — not shown on the page
`<body>`	everything visible

What goes in the <head>

The head holds information *about* the page — title, character set, viewport, styles, scripts, and meta tags.

index.html

<head>
  <meta charset="UTF-8">                <!-- text encoding (always UTF-8) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>             <!-- browser tab + search result -->
  <meta name="description" content="A short summary for search engines.">
  <link rel="icon" href="/favicon.ico"> <!-- tab icon -->
  <link rel="stylesheet" href="styles.css">
  <script src="app.js" defer></script>  <!-- defer = run after HTML parses -->
</head>

Note: charset and viewport are essential on every page — the first prevents garbled characters, the second makes the page display correctly on mobile.

Comments

index.html

<!-- This is a comment; ignored by the browser -->

Nesting & validity

Elements nest inside one another and must close in the right order. Indent nested elements to keep the structure readable.

index.html

<ul>
  <li>Item <strong>one</strong></li>   <!-- correctly nested -->
</ul>

Tip: Run your page through the W3C validator (validator.w3.org) to catch unclosed tags and structural mistakes early.

Free preview. Sign in and subscribe to unlock all 809 lessons across 25 courses.