Chapter 2 — HTML Document Structure & Syntax

Learning Outcome

Create a valid HTML5 page with correct document structure from scratch.

← 01 - Introduction to Web Development | Next → 03 - Tags Elements & Attributes

2.1 DOCTYPE Declaration

Every HTML5 document must begin with <!DOCTYPE html>.

<!DOCTYPE html>

Tells the browser which version of HTML is being used.
Without it, browsers enter "quirks mode" and render inconsistently.
Always place it on the very first line.

Don't Skip DOCTYPE

Missing <!DOCTYPE html> causes unpredictable rendering across browsers — especially older ones.

2.2 The Root Structure

Every HTML page is built around 4 essential tags:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
  </head>
  <body>
    <!-- All visible content goes here -->
  </body>
</html>

lang Attribute

Always add lang="en" (or your language code) on <html>. It helps screen readers pronounce content correctly and improves SEO.

2.3 The `<head>` Tag — In Detail

The <head> contains metadata — data about the document, not in it.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="An HTML tutorial for beginners">
  <meta name="author" content="Your Name">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
  <script src="app.js" defer></script>
</head>

2.4 HTML Syntax Rules

Core Syntax Rules

Tags are written in lowercase (best practice)
Most tags come in pairs — opening + closing: <p>…</p>
Self-closing tags have no closing tag: <br>, <img>, <hr>
Tags must be properly nested — inner tag closes before outer tag
Attribute values go in double quotes

<!-- ✅ Correct nesting -->
<p><strong>Bold text</strong> in a paragraph.</p>

<!-- ❌ Wrong nesting -->
<p><strong>Bold text</p></strong>

2.5 HTML Boilerplate (Full Template)

Save this as your starting template for every new HTML file:

<!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="Page description here">
  <title>Document Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Hello, World!</h1>

  <script src="app.js" defer></script>
</body>
</html>

VS Code Shortcut

In VS Code, type ! and press Tab — it auto-generates the full boilerplate instantly. (Requires Emmet, which is built-in.)

🚀 Recommended Projects

Project 1 — First Webpage

Create a complete HTML page with proper DOCTYPE, head, and body. Add a title, one <h1> heading, and two <p> paragraphs about your favourite subject.

Project 2 — Metadata Explorer

Create 3 different pages each with unique <meta> description tags and titles. Open them and observe how the browser tab changes.

📌 Quick Recall

<!DOCTYPE html> → always first line
<html> → root | <head> → metadata | <body> → visible content
charset="UTF-8" → supports all languages
viewport meta → mobile-responsive
VS Code shortcut: ! + Tab = full boilerplate