HTML & CSS · Module 4 of 10

Semantic HTML and accessibility

Use meaningful tags so everyone, including screen readers and search engines, understands the page.

📖 Key ideas

Semantic tags: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.
Use <button> for actions and <a> for navigation.
Good heading order (h1 > h2 > h3) gives structure.
Contrast and font size matter for readability.
Every interactive element should work with the keyboard.

💡 Real-life example: Semantic tags are signboards in a mall: "Food court", "Exit", "Lift"; everyone finds their way.

<nav>Main navigation links

<main>The main content of the page

<footer>Bottom section of a page

Screen readerTool that reads pages aloud