~/hackweb.dev
HTML Document Structure
Quiz
...

HTML Document Structure

beginner · updated Tue Sep 08 2026Contribute

Master the essential HTML5 boilerplate and document structure.

HTML Document Structure

Every HTML page starts with the same basic skeleton. Understanding this structure is the first step to building web pages.

The HTML5 Boilerplate

Here’s the minimal structure every HTML document needs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
  </head>
  <body>
    <!-- Your visible content goes here -->
  </body>
</html>

Breaking Down Each Part

<!DOCTYPE html>

This declaration tells the browser to use HTML5. It must be the very first line — no blank lines before it.

<html lang="en">

The root element wrapping everything. The lang attribute helps:

  • Screen readers pronounce content correctly
  • Search engines understand the language
  • Translation tools work properly

<head> Section

Contains metadata — information about the page that isn’t displayed:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Page Title</title>
  <meta name="description" content="Brief page description" />
  <link rel="stylesheet" href="styles.css" />
</head>

Key meta tags:

  • charset — character encoding (always use UTF-8)
  • viewport — makes sites responsive on mobile
  • title — appears in browser tabs and search results
  • description — used by search engines

<body> Section

Contains everything visible on the page — text, images, links, forms, etc.

<body>
  <h1>Welcome to My Site</h1>
  <p>This is visible content.</p>
</body>

Complete Example

Here’s a real-world starter template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Awesome Website</title>
    <meta name="description" content="A website I built learning HTML" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header>
      <h1>My Site</h1>
    </header>
    <main>
      <h2>About Me</h2>
      <p>Hello! I'm learning web development.</p>
    </main>
    <footer>
      <p>&copy; 2026 My Site</p>
    </footer>
  </body>
</html>

Common Mistakes

  1. Missing DOCTYPE — Browser goes into quirks mode
  2. Putting content in <head> — Only metadata belongs here
  3. Forgetting lang attribute — Hurts accessibility
  4. No viewport meta — Site won’t work on mobile

Pro Tip

Most code editors have a shortcut for this. In VS Code, type ! and press Tab — it generates the full boilerplate instantly!