Semantic HTML & Accessibility Cheatsheet
Quick reference for all concepts covered in Lecture 2.
HTML5 Semantic Elements
These elements replaced the old <div id="header"> pattern. Use them to give your HTML meaning.
Key Rules:
- Only ONE
<main> per page <header> and <footer> can appear inside <article> and <section> (not just at page level)<section> should almost always have a heading (<h2>–<h6>)
Semantic Page Structure
A typical semantic page layout:
1┌──────────────────────────────────┐
2│ <header> │ ← Banner: logo, title, tagline
3│ ┌──────────────────────────┐ │
4│ │ <nav> │ │ ← Navigation: main menu
5│ └──────────────────────────┘ │
6└──────────────────────────────────┘
7┌──────────────────────┐ ┌────────┐
8│ <main> │ │<aside> │
9│ ┌────────────────┐ │ │ │
10│ │ <section> │ │ │Sidebar │
11│ │ About │ │ │content │
12│ └────────────────┘ │ │ │
13│ ┌────────────────┐ │ └────────┘
14│ │ <section> │ │
15│ │ Skills │ │
16│ └────────────────┘ │
17│ ┌────────────────┐ │
18│ │ <article> │ │
19│ │ Blog Post │ │
20│ └────────────────┘ │
21└──────────────────────┘
22┌──────────────────────────────────┐
23│ <footer> │ ← Copyright, contact, links
24└──────────────────────────────────┘
Semantic vs Non-Semantic Comparison
1
2<div id="header">
3 <div id="nav">...</div>
4</div>
5<div id="content">
6 <div class="article">...</div>
7 <div id="sidebar">...</div>
8</div>
9<div id="footer">...</div>
10
11
12<header>
13 <nav>...</nav>
14</header>
15<main>
16 <article>...</article>
17 <aside>...</aside>
18</main>
19<footer>...</footer>
Why it matters: Both render identically, but semantic HTML:
- Creates landmarks for screen readers
- Improves SEO (search engines understand page structure)
- Makes code self-documenting for other developers
Accessibility (A11y) Basics
ARIA (Accessible Rich Internet Applications)
ARIA adds accessibility info when semantic HTML isn't enough.
The First Rule of ARIA: Don't use ARIA if a native HTML element can do the job. Semantic HTML first!
Skip Navigation
1
2<a href="#main-content" class="skip-link">Skip to main content</a>
3
4
5<main id="main-content">
6 ...
7</main>
Skip links let keyboard and screen reader users jump past navigation directly to main content.
Accessibility Landmarks
Semantic elements automatically create ARIA landmarks:
Alt Text Best Practices
Good vs Bad Alt Text
1
2<img src="photo.jpg" alt="image">
3<img src="photo.jpg" alt="photo">
4<img src="photo.jpg" alt="">
5
6
7<img src="photo.jpg" alt="Ayesha Khan presenting at a React conference">
8<img src="chart.jpg" alt="Bar chart showing React usage growing from 40% to 67% between 2022 and 2026">
Alt Text Decision Guide
Pro Tip: Read your alt text out loud. If it describes the image well to someone who can't see it, it's good.
SEO Meta Tags
Essential Meta Tags
1<head>
2
3 <title>Ayesha Khan — Frontend Developer Portfolio</title>
4
5
6 <meta name="description" content="Portfolio of Ayesha Khan, a frontend developer specializing in React and Next.js.">
7
8
9 <meta name="author" content="Ayesha Khan">
10</head>
Open Graph Tags (Social Sharing)
1<head>
2
3 <meta property="og:title" content="Ayesha Khan — Frontend Developer Portfolio">
4 <meta property="og:description" content="Explore projects and skills of a modern frontend developer.">
5 <meta property="og:type" content="website">
6 <meta property="og:image" content="https://example.com/preview-image.jpg">
7</head>
Remember:
<title> and <meta description> should be unique for every page- Keep descriptions under 155 characters
og:image should be at least 1200x630 pixels for best social previews
Common Mistakes to Avoid
1. Div Soup (No Semantic Elements)
1
2<div id="header">
3 <div id="nav">...</div>
4</div>
5
6
7<header>
8 <nav>...</nav>
9</header>
2. Multiple <main> Elements
1
2<main>...</main>
3<main>...</main>
4
5
6<main>
7 <section>...</section>
8 <section>...</section>
9</main>
3. Using <section> as a Generic Wrapper
1
2<section class="wrapper">...</section>
3
4
5<div class="wrapper">...</div>
4. Missing Landmarks for Screen Readers
1
2<div>Navigation here</div>
3<div>Main content here</div>
4
5
6<nav>Navigation here</nav>
7<main>Main content here</main>
5. Using ARIA When Semantic HTML Exists
1
2<nav role="navigation">...</nav>
3
4
5<nav>...</nav>
6
7
8<nav aria-label="Main navigation">...</nav>
VS Code Shortcuts
Chrome DevTools: Accessibility Tree
How to inspect the accessibility tree:
- Open DevTools (
F12 or Ctrl + Shift + I) - Go to the Elements tab
- Open the Accessibility pane (in the right sidebar)
- Enable "Full-page accessibility tree" button (top of Elements panel)
- Toggle between DOM tree and accessibility tree
What to look for:
banner = <header>navigation = <nav>main = <main>complementary = <aside>contentinfo = <footer>
If you see no landmarks, you're missing semantic elements.
Quick Reference Table
What's Next?
In Lecture 3: CSS Fundamentals & The Box Model, you'll learn:
- How CSS transforms plain HTML into beautiful, professional designs
- The Box Model — every element is a box with content, padding, border, and margin
- Selectors, properties, and values
- Building a Styled Business Card from our plain HTML
Keep this cheatsheet handy while working on your assignment!
