Document Structure

HTML Document Structure, DOCTYPE and Browser Parsing

Welcome to Section 2 of Codementrix HTML5 Mastery. In the previous lesson, you learned what HTML is and how browsers display webpages. In this lesson, you will learn how to structure a complete HTML document, why DOCTYPE matters, how the head and body work, and how browsers parse HTML.

1. Learning Objectives

By the end of this lesson, you should be able to:

• Identify the main parts of an HTML document.
• Explain the purpose of the HTML5 DOCTYPE declaration.
• Understand the html, head, title and body elements.
• Use basic metadata correctly.
• Understand the difference between source HTML and the DOM.
• Describe how browsers tokenize and parse HTML.
• Understand how browsers recover from common markup errors.
• Recognize how scripts can affect HTML parsing.
• Debug common document-structure problems.

2. Anatomy of an HTML Document

A standard HTML document contains a document type declaration, a root html element, a head section and a body section.

Basic HTML5 Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to Codementrix</h1>
    <p>This is a complete HTML document.</p>
</body>
</html>

Understanding Each Part

• <!DOCTYPE html> declares the document type and helps browsers use standards mode.
• <html lang="en"> is the root element and identifies the primary language of the document.
• <head> contains metadata and resource references rather than the main visible page content.
• <meta charset="UTF-8"> declares the character encoding.
• <meta name="viewport"> provides viewport information used by mobile browsers.
• <title> defines the document title, commonly displayed in the browser tab.
• <body> contains the document's main content.

The closing </html> tag marks the end of the root element in the source. Although some end tags can be omitted under specific HTML rules, writing a clear, complete structure is recommended for maintainability.

3. Understanding DOCTYPE

DOCTYPE is a declaration placed at the beginning of an HTML document. It is not a normal HTML element.

HTML5 DOCTYPE

<!DOCTYPE html>

This short declaration tells a browser to use standards mode for an HTML document. It does not select an HTML version in the way older, lengthy DOCTYPE declarations did.

What Is Standards Mode?

Standards mode is the browser's standards-oriented rendering mode. It aims to follow modern HTML and CSS behavior.

Without a suitable DOCTYPE, browsers may enter quirks mode, which emulates certain behaviors of older browsers to support legacy pages.

Standards Mode vs Quirks Mode

Important: The exact rendering behavior in quirks mode depends on the browser and the feature involved. Do not assume every CSS property behaves differently.

Common Mistake