HTML Document Structure

Every HTML page follows a fixed structure that browsers understand.
This structure tells the browser how to read and display the page correctly.

Learning this structure is important because all HTML pages are built the same way.

Basic Structure of an HTML Document

A standard HTML document contains these main parts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="HTML document structure example">
  <meta name="author" content="HTML Tutorial">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Document Structure</title>
</head>
<body>
  <h1>Page Heading</h1>
  <p>This is the main content of the page.</p>
</body>
</html>

Explanation of Each Part

<!DOCTYPE html>

  • Declares the document as HTML5
  • Must be the first line in the file
  • Helps browsers render the page correctly

<html>

Root element of the page.

Common attributes:

  • lang → defines page language

Example:

<html lang="en">

<head>

Contains information about the page, not visible content.

Used for:

  • Page title
  • Meta information
  • Character encoding
  • Responsive settings

<meta>

Provides metadata about the document.

Common attributes used:

  • charset
  • name
  • content

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>

  • Defines the page title
  • Shown in browser tab and search results

Example:

<title>HTML Document Structure</title>

<body>

Contains all visible content of the page.

Examples of content:

  • Text
  • Images
  • Links
  • Forms

Important Notes

  • Only one <html>, <head>, and <body> per page
  • Order of elements matters
  • Browsers ignore extra spaces
  • Always use lowercase tags

Why Document Structure Matters

  • Ensures browser compatibility
  • Improves SEO
  • Helps screen readers
  • Makes code readable and maintainable