Document Structure

Learn the essential structure of every HTML document

HTML Document Structure

Every HTML document follows a standard structure. Understanding this structure is the foundation of web development.

The DOCTYPE Declaration

<!DOCTYPE html>
HTML

This tells the browser we're using HTML5. Always include it at the very top of your HTML files.

Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>
HTML

Breaking It Down

Element Purpose
<html> The root element that wraps everything
<head> Contains metadata, title, and linked resources
<body> Contains all visible content
<meta charset> Sets the character encoding (always use UTF-8)
<meta viewport> Makes the page responsive on mobile devices
<title> Sets the browser tab title

The <head> Section

The head contains information about the page, not visible content:

<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>
HTML

The <body> Section

The body contains everything the user sees:

<body>
    <header>
        <nav>Navigation goes here</nav>
    </header>
    <main>
        <h1>Main content heading</h1>
        <p>Page content goes here.</p>
    </main>
    <footer>
        <p>Footer content</p>
    </footer>
</body>
HTML

Best Practices

  • Always declare <!DOCTYPE html>
  • Always set lang attribute on <html>
  • Always include the viewport meta tag for responsive design
  • Use semantic elements (<header>, <main>, <footer>) instead of generic <div>s