Module 2: Document Anatomy

📖 The HTML Document Skeleton

Every valid HTML document follows a specific structure. Think of it like a formal letter — it has required parts that must appear in a specific order.

The Complete Document Template

<!-- This is the 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">
        <title>Page Title Here</title>
    </head>
    <body>
        <!-- All visible content goes here -->
    </body>
</html>
            

Breaking Down Each Part

Element	Purpose	Required?
`<!DOCTYPE html>`	Tells the browser this is an HTML5 document	Yes
`<html>`	The root element that wraps everything	Yes
`lang="en"`	Declares the page language (helps screen readers & SEO)	Recommended
`<head>`	Contains metadata (information about the document)	Yes
`<meta charset="UTF-8">`	Sets character encoding to support all languages	Yes
`<meta viewport>`	Makes the page responsive on mobile devices	Yes
`<title>`	Sets the browser tab title	Yes
`<body>`	Contains all visible content	Yes

⚠️ Common Mistake: Never put visible content inside the <head>. Only metadata goes there. All text, images, and elements users see must be inside <body>.

📋 Understanding DOCTYPE

The <!DOCTYPE html> declaration is the very first line of every HTML5 document. It is not an HTML tag — it's an instruction to the browser.

Why DOCTYPE Matters

Browsers have two modes:

Standards Mode: Renders the page using modern web standards (correct behavior)
Quirks Mode: Emulates old browser bugs for backward compatibility (unpredictable)

Without a DOCTYPE, browsers switch to Quirks Mode, and your page may look broken or behave unexpectedly.

HTML5 vs. Older Versions

In older HTML versions, DOCTYPE was long and complicated:

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

<!-- HTML5 DOCTYPE (simple and clean) -->
<!DOCTYPE html>
            

💡 Remember: HTML5 simplified everything. Just write <!DOCTYPE html> and you're good to go!

🔍 The <head> Section Deep Dive

The <head> contains invisible but essential information. Let's explore the most important elements.

Character Encoding (Critical!)

UTF-8 supports every character in every human language — including Amharic, Arabic, Chinese, emojis, and special symbols. Always include this as the first meta tag.

Viewport Meta Tag (Mobile Essential)

This tag ensures your website looks good on phones and tablets. Without it, mobile browsers might zoom out and show a tiny, unreadable version of your desktop layout.

Description Meta Tag (SEO)

<meta name="description" content="Learn HTML from scratch with Ethioweb.net's free beginner course.">
            

This appears in Google search results under your page title. Keep it under 160 characters and make it compelling!

Author Meta Tag

Favicon (Browser Tab Icon)

The tiny icon that appears in browser tabs and bookmarks. You can also use PNG or SVG formats.

Complete Head Example

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn HTML with Ethioweb.net">
    <meta name="author" content="Ethioweb.net">
    <title>HTML Course - Ethioweb.net</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
</head>
            

✏️ Exercise 2.1: Build a Perfect Document Skeleton

Your Task

Create a new file called skeleton.html with the following requirements:

Correct HTML5 DOCTYPE declaration
<html> tag with lang="en"
A <head> containing:
- UTF-8 charset meta tag
- Viewport meta tag
- Description meta tag about yourself
- Author meta tag with your name
- A meaningful <title>
A <body> containing:
- An <h1> with your name
- A <p> introducing yourself

Validation Check

After creating your file, validate it using the W3C Markup Validation Service. A valid document should show "Document checking completed. No errors or warnings to show."

📝 Module 2 Quiz

🎯 Module Summary

✅ Every HTML document needs <!DOCTYPE html>
✅ The <html> element is the root container
✅ <head> holds metadata; <body> holds visible content
✅ Always set charset="UTF-8" and viewport meta tags
✅ Validate your HTML with the W3C Validator

← Previous Module Next: Module 3 →