Document Structure

Difficulty: Beginner

Every HTML document follows a specific structure that tells the browser how to interpret and render the page. This structure has been refined over decades of web standards development, and understanding each part is fundamental to writing correct HTML.

The very first line of any HTML5 document must be the DOCTYPE declaration: <!DOCTYPE html>. This is not an HTML tag - it is an instruction to the browser about which version of HTML the document uses. In older versions of HTML (like HTML 4.01 or XHTML 1.0), the DOCTYPE was long and complex, referencing specific DTD (Document Type Definition) files. HTML5 simplified this to just <!DOCTYPE html>. If you omit the DOCTYPE, browsers fall into 'quirks mode,' where they emulate old, buggy rendering behavior for backward compatibility. Always include the DOCTYPE to ensure 'standards mode' rendering.

The <html> element is the root element that wraps everything in the document. It should include a lang attribute (e.g., lang="en" for English) which helps screen readers pronounce text correctly and assists search engines in determining the page language. Inside the <html> element, there are exactly two child elements: <head> and <body>.

The <head> element contains metadata - information about the document that is not displayed on the page itself. The most essential meta tag is <meta charset="UTF-8">, which tells the browser to use UTF-8 character encoding, supporting virtually every character from every language. Other common head elements include <title> (the text shown in the browser tab), <meta name="viewport"> (critical for mobile responsiveness), <link> (for linking CSS stylesheets), and <meta name="description"> (for SEO). The head is also where you include external resources like fonts, icons, and scripts.

The <body> element contains all the visible content of the page - text, images, links, forms, and everything the user sees and interacts with. There can only be one <body> element per document. Everything you want to display to users goes inside the body.

The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag is crucial for responsive web design. Without it, mobile browsers will render your page at a desktop width (typically 980px) and then scale it down, making text tiny and unusable. This viewport meta tag tells the browser to set the page width to the device width and start at 1x zoom, enabling your CSS media queries and responsive styles to work correctly.

Code examples

Complete HTML5 Document Structure

<!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 - Shown in Browser Tab</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Visible Content Goes Here</h1>
  <p>Everything inside the body is rendered on screen.</p>
  <script src="app.js" defer></script>
</body>
</html>

This is the standard HTML5 boilerplate. The DOCTYPE triggers standards mode, the charset ensures proper character rendering, the viewport meta enables responsive design, and the title appears in the browser tab.

DOCTYPE Comparison: HTML5 vs Older Versions

<!-- HTML5 (current standard) -->
<!DOCTYPE html>

<!-- HTML 4.01 Strict (old) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict (old) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 dramatically simplified the DOCTYPE declaration. The older versions required referencing specific DTD files. Always use the HTML5 DOCTYPE - it is shorter, simpler, and works in all browsers.

Common Head Elements

<head>
  <!-- Character encoding (always first) -->
  <meta charset="UTF-8">

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

  <!-- SEO meta tags -->
  <meta name="description" content="Learn HTML from scratch">
  <meta name="keywords" content="HTML, tutorial, web development">
  <meta name="author" content="Jane Developer">

  <!-- Page title -->
  <title>Learn HTML - Tutorial</title>

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">

  <!-- External CSS -->
  <link rel="stylesheet" href="styles.css">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
</head>

The <head> holds all metadata. Place <meta charset> first so the browser knows the encoding before parsing anything else. The viewport meta tag is essential for mobile devices. External stylesheets and fonts are linked here.

Key points

Always include <!DOCTYPE html> as the very first line. Without it, browsers enter quirks mode, which can cause inconsistent rendering.
The <meta charset="UTF-8"> tag should be the first element inside <head> so the browser knows the encoding before processing any other content.
The lang attribute on the <html> tag is important for accessibility (screen readers) and SEO (search engines).

Concepts covered

DOCTYPE, html Element, head Element, body Element, meta charset, Metadata