HTML Document Structure

Difficulty: Beginner

Question

Explain the structure of an HTML document. What goes in the head vs body?

Answer

An HTML document has a strict structure:

1. <!DOCTYPE html> - tells browser to use standards mode 2. <html lang="en"> - root element with language 3. <head> - metadata, not visible: title, meta, links, scripts 4. <body> - visible content

The head contains: - <title> for browser tab/SEO - <meta> for charset, viewport, description - <link> for stylesheets, favicons - <script> for JS (prefer defer/async or at body end)

The body contains all visible page content.

Code examples

Complete HTML5 Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1" />
  <meta name="description"
        content="Page description for SEO" />
  <title>Page Title</title>

  <!-- Preconnect to external origins -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />

  <!-- Stylesheets -->
  <link rel="stylesheet" href="/styles.css" />

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" />
</head>
<body>
  <header>
    <nav><!-- navigation --></nav>
  </header>
  <main>
    <h1>Page Heading</h1>
    <p>Content goes here.</p>
  </main>
  <footer><!-- footer --></footer>

  <!-- Scripts at end or use defer -->
  <script src="/app.js"></script>
</body>
</html>

This is the minimal production-ready HTML5 boilerplate. Every element has a purpose.

Script Loading Strategies

<!-- 1. Default: blocks parsing -->
<script src="app.js"></script>
<!-- Parser stops, downloads, executes, then continues -->

<!-- 2. async: downloads parallel, executes ASAP -->
<script async src="analytics.js"></script>
<!-- Good for independent scripts (analytics, ads) -->

<!-- 3. defer: downloads parallel, executes after parse -->
<script defer src="app.js"></script>
<!-- Best for app scripts that need the DOM -->

<!-- 4. type=module: deferred by default -->
<script type="module" src="app.mjs"></script>
<!-- ES modules are always deferred -->

<!-- Loading order with multiple scripts:
  defer: preserves order (a.js then b.js)
  async: no guaranteed order -->

Use defer for your main app bundle. Use async for third-party scripts that don't depend on your code. Never block rendering with synchronous scripts in the head.

DOCTYPE and Quirks Mode

<!-- Standards mode (always use this) -->
<!DOCTYPE html>

<!-- Without DOCTYPE, browser enters Quirks Mode:
  - Box model behaves differently
  - CSS is interpreted inconsistently
  - Tables, images have different defaults
  - Modern layout features may not work
-->

<!-- The lang attribute helps:
  - Screen readers use correct pronunciation
  - Browsers offer translation
  - Search engines know the language
-->
<html lang="en">
<!-- For multilingual content: -->
<p lang="fr">Bonjour le monde</p>

DOCTYPE html is the shortest valid doctype. It triggers standards mode in all browsers. Without it, browsers use quirks mode with unpredictable CSS behavior.

Key points

DOCTYPE must be the very first thing in the document, before <html>
charset meta tag should be within the first 1024 bytes of the document
Use defer for scripts, not async, when execution order matters

Concepts covered

DOCTYPE, HTML Head, Meta Tags, Script Loading, Document Flow