🏗️ Phase 2 · HTML Basics🟢 BeginnerModule 02

HTML Document Structure

⏱ 20 min read📖 6 sections🧩 5-question quiz🏆 1 challenge

Course Progress11% complete

Every valid HTML document follows a precise skeleton — a set of required elements in a specific order. Understanding this structure isn't just about following rules: it's about telling browsers, search engines, and assistive technology everything they need to know before rendering a single visible character.

Section 1

The DOCTYPE Declaration

<!DOCTYPE html> is the very first line of every HTML5 document. It's not an HTML tag — it's an instruction to the browser. It says: "Render this page in HTML5 standards mode."

HTMLLine 1 of every HTML file

<!DOCTYPE html>  <!-- Always first, no exceptions -->

📜

Not case-sensitive

<!DOCTYPE HTML> and <!doctype html> both work — but uppercase is the convention.

🕹️

Triggers standards mode

Without DOCTYPE, browsers enter "quirks mode" — emulating old IE bugs. This breaks modern CSS layouts.

✂️

HTML5 simplified it

Older HTML versions had long DOCTYPE strings with URLs. HTML5 reduced it to just <!DOCTYPE html>.

⚡

Required, not optional

Omitting DOCTYPE causes inconsistent rendering across browsers. Always include it.

Section 2

The <html> Root Element

The <html> element wraps the entire document. Every other element in the page is a descendant of this root. It has one critical attribute you should always include:

HTMLThe html root element

<html lang="en">
  <!-- All head and body content goes here -->
</html>

The lang attribute declares the primary language of the page. It's used by:

🔍

Search Engines

Google uses lang to target search results to the right regional audience.

♿

Screen Readers

Screen readers choose the correct voice and pronunciation for the language.

🌐

Browsers

Browsers offer "translate this page?" in the right language based on lang.

💡

Always set the lang attribute

Use BCP 47 language codes: en (English), en-US (American English), fr (French), ar (Arabic), zh (Chinese), ur (Urdu). Omitting lang is an accessibility failure.

Section 3

The <head> — Invisible Metadata

The <head> contains information about the page — none of it is rendered directly on screen. Think of it as the document's control panel.

Element	Purpose	Required?
`<meta charset="UTF-8">`	Character encoding — supports all Unicode characters	✅ Yes
`<meta name="viewport"...>`	Mobile responsiveness — critical for modern sites	✅ Yes
`<title>`	Browser tab text + SEO page title	✅ Yes
`<meta name="description">`	Search engine snippet text (155 chars)	Recommended
`<link rel="stylesheet">`	Links to external CSS files	If using CSS
`<link rel="icon">`	Favicon — tab icon	Recommended
`<script>`	JavaScript (prefer at end of body or with defer)	If using JS

HTMLComplete head section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page Title — My Site Name</title>
  <meta name="description" content="A 155-char description of this page for search engines.">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="css/style.css">
</head>

Section 4

The <body> — Visible Content

The <body> contains everything the user sees and interacts with. Every visible element on your page — text, images, buttons, forms, navigation — lives inside the body.

📌

One head, one body — always

An HTML document must have exactly one <head> and one <body>. Browsers will often "fix" missing or duplicate elements, but the resulting DOM may be unpredictable. Always write the correct structure.

HTMLThe body element

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <h1>Page Heading</h1>
    <p>Content goes here.</p>
  </main>
  <footer>...</footer>
  <!-- Scripts go here (before closing body) -->
  <script src="js/main.js"></script>
</body>

Section 5

Comments in HTML

Comments let you leave notes in your code that browsers ignore. They're essential for documentation, debugging, and temporarily disabling code.

HTMLHTML comments

<!-- This is a single-line comment -->

<!--
  This is a
  multi-line comment
-->

<!-- TODO: Add the contact form here -->
<div class="contact">...</div>

<!-- <p>This paragraph is commented out (disabled)</p> -->

⚠️

Comments are visible in page source

Anyone can right-click → View Page Source and read your HTML comments. Never put passwords, API keys, or sensitive notes in HTML comments. They are not private.

Section 6

The Complete Document Skeleton

Here is the full template you should start every HTML project with. Every element here has a purpose — don't remove any of them:

HTMLComplete HTML5 Document Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title | Site Name</title>
  <meta name="description" content="Brief description of this page (max 155 chars).">
  <link rel="icon" href="/favicon.ico">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- Site header / navigation -->
  <header>
    <nav></nav>
  </header>

  <!-- Main page content -->
  <main>
    <h1>Your Page Heading</h1>
  </main>

  <!-- Footer -->
  <footer></footer>

  <!-- Scripts at end of body -->
  <script src="js/main.js"></script>
</body>
</html>

🚀

Save this as a snippet

In VS Code, go to File → Preferences → User Snippets → html.json and save this template as a custom snippet. Type your trigger keyword and expand it instantly in any new file — faster than Emmet's ! boilerplate since you can customize it.

🧩 Quick Check — Lesson 4

5 questions · instant feedback · no penalty for wrong answers

1. What is the purpose of <!DOCTYPE html>?

2. Why is the lang attribute on <html> important?

3. Where should JavaScript <script> tags ideally be placed?

4. What does the viewport meta tag do?

5. Are HTML comments visible to end users?

🏆

Quiz Complete!

HTML structure mastered. Let's explore elements next!

🏆

Lesson 4 Challenge

Code exercise · 15 min

Build the skeleton of a 3-page website from scratch.

Create 3 HTML files in a folder: index.html, about.html, contact.html.

Each file must have: correct DOCTYPE, html element with lang="en", complete head section (charset, viewport, unique title, meta description, link to style.css), body section with a header, main (with an h1), and footer. Add at least 2 HTML comments — one in the head, one in the body.

Also create an empty css/style.css file and an empty js/main.js file. Your project structure should match the standard folder layout from section 6.

Show hints

Each page title should be unique: "Home | MySite", "About | MySite", "Contact | MySite"
The meta description should describe each specific page
Create the css/ and js/ folders first, then the files inside them
Open the project in VS Code: File → Open Folder

← Setting Up Environment

Lesson 4 of 35HTML Fundamentals

HTML Elements →