HTML Document Structure

Every HTML page follows a standard structure. Understanding this structure is essential because the browser relies on it to parse and display your content correctly. A well-structured document also improves accessibility, SEO, and maintainability.

The Basic Document Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A brief description of the page">
  <title>Page Title</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content goes here.</p>
    </article>
  </main>

  <footer>
    <p>Copyright 2025</p>
  </footer>

  <script src="app.js"></script>
</body>
</html>

The DOCTYPE Declaration

<!DOCTYPE html>

The <!DOCTYPE html> declaration must be the very first line. It tells the browser to use standards mode (modern rendering) rather than quirks mode (legacy compatibility). Without it, browsers may render your page inconsistently.

Key fact: In older HTML versions, the DOCTYPE was long and complex. HTML5 simplified it to just <!DOCTYPE html>.

The `<html>` Element

<html lang="en">
  ...
</html>

HTML Document Structure

HTML Document Structure

The Basic Document Template

The DOCTYPE Declaration

The <html> Element

More in Programming

The `<html>` Element