HTML Document Structure

Overview

Every HTML page shares the same skeleton: a doctype declaration, a root <html> element, a <head> for metadata, and a <body> for visible content. Getting this structure right tells browsers how to render the page and sets sensible defaults for encoding and responsiveness. It is the foundation every other HTML concept builds on.

Syntax / Usage

The <!DOCTYPE html> line puts the browser in standards mode. The <head> holds information about the page, while everything the user sees lives in the <body>.

<!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 a complete HTML document.</p>
  </body>
</html>

Examples

A minimal but valid page with a description for search engines:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="A short guide to HTML basics." />
    <title>HTML Basics</title>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>

Linking an external stylesheet from the <head>:

<head>
  <meta charset="UTF-8" />
  <title>Styled Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>

Common Mistakes

Forgetting <!DOCTYPE html>, which triggers quirks mode and inconsistent rendering
Leaving off the <meta charset="UTF-8"> tag, causing garbled special characters
Omitting the viewport meta tag, breaking layout on mobile devices
Placing visible content inside <head> instead of <body>
Missing the lang attribute on <html>, which hurts accessibility and translation

Overview

Syntax / Usage

Examples

Common Mistakes

See Also