Web Development Lesson 2 of 5

Semantic HTML5 & Accessible Document Structure

22:15 Foundations of Modern Web Development

Write clean, meaningful HTML5 using headers, navigation, main sections, and accessible forms that screen readers and search engines love.

Lesson notes

HTML is not just visual layout; it is the semantic meaning of your content. Using proper tags ensures blind users with screen readers can navigate your site smoothly.

What you'll learn

Why <div> soup ruins accessibility and SEO
Proper usage of <header>, <nav>, <main>, <article>, and <footer>
Accessible form elements with paired labels and ARIA attributes

1. Core Semantic Landmarks

Use `<header>` for page headers, `<nav>` for navigation links, `<main>` strictly once per page for primary content, and `<section>` or `<article>` for self-contained topics.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Web App</title>
  </head>
  <body>
    <header>
      <nav aria-label="Main navigation">
        <a href="/">Home</a>
      </nav>
    </header>
    <main>
      <article>
        <h1>Semantic HTML5 Rules</h1>
        <p>Accessible, readable, and structured for everyone.</p>
      </article>
    </main>
  </body>
</html>

Standard boilerplate showing clean HTML5 semantic structure.