Document Structure

Understanding the anatomy of an HTML document

The DOCTYPE Declaration

Every HTML document must begin with a DOCTYPE declaration. This tells the browser which version of HTML the document uses and ensures the page renders in standards mode.

<!DOCTYPE html>

The modern HTML5 DOCTYPE is simple and case-insensitive. It replaced the complex DOCTYPE declarations required by earlier HTML versions.

The HTML Element

The <html> element is the root element that contains all other elements in the document. It should always include the lang attribute to specify the document's primary language.

<html lang="en"> <!-- All document content goes here --> </html>

Language Codes

The lang attribute uses BCP 47 language tags. Common examples include:

  • en - English
  • en-US - American English
  • en-GB - British English
  • es - Spanish
  • fr - French
  • zh-Hans - Simplified Chinese
  • ja - Japanese

The Head Element

The <head> element contains metadata about the document. This content is not displayed on the page but is essential for proper document configuration.

Essential Meta Tags

Character Encoding

Always declare character encoding as the first element in the head. UTF-8 supports virtually all characters from all writing systems.

<meta charset="UTF-8">

Viewport Configuration

The viewport meta tag is essential for responsive design. It tells mobile browsers how to handle the page width.

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

Document Title

The <title> element sets the page title shown in browser tabs, bookmarks, and search results.

<title>Page Title - Site Name</title>

Complete Head Example

<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 content"> <title>Document Structure - HTML Tutorial</title> <link rel="stylesheet" href="styles.css"> </head>

The Body Element

The <body> element contains all the visible content of the document. This is where your page's text, images, links, and other content live.

Semantic Sectioning

HTML5 introduced semantic sectioning elements that describe the purpose of different content areas:

<body> <header> <nav>Site navigation</nav> </header> <main> <article> <h1>Article Title</h1> <p>Article content...</p> </article> </main> <aside> Sidebar content </aside> <footer> Copyright and links </footer> </body>

Sectioning Elements

  • <header> - Introductory content or navigation
  • <nav> - Navigation links
  • <main> - The main content (use only once per page)
  • <article> - Self-contained, independently distributable content
  • <section> - Generic thematic grouping of content
  • <aside> - Content tangentially related to the main content
  • <footer> - Footer for the nearest sectioning element

Complete Document Template

Here is a complete, minimal HTML document with all required elements:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> </head> <body> <header> <h1>Welcome</h1> </header> <main> <p>Page content goes here.</p> </main> <footer> <p>Footer content</p> </footer> </body> </html>