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.

Element	Purpose	When to Use
`<header>`	Introductory content or navigational aids	Page header, article header, section header
`<nav>`	Navigation links	Main menu, sidebar links, breadcrumbs
`<main>`	Primary content of the page	ONE per page — the core content
`<section>`	Thematic grouping of content	Chapters, tabs, grouped content with a heading
`<article>`	Self-contained, independently distributable content	Blog posts, news articles, product cards, comments
`<aside>`	Tangentially related content	Sidebars, pull quotes, related links, fun facts
`<footer>`	Footer for its nearest ancestor	Page footer, article footer (author bio, dates)

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<!-- NON-SEMANTIC (div soup) — AVOID -->
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<!-- SEMANTIC (meaningful) — USE THIS -->
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.

Attribute	Purpose	Example
`aria-label`	Provides a text label for elements	`<nav aria-label="Main navigation">`
`aria-labelledby`	Points to an element that labels this one	`<section aria-labelledby="about-heading">`
`role`	Defines what an element IS	`<div role="navigation">` (prefer `<nav>` instead)

The First Rule of ARIA: Don't use ARIA if a native HTML element can do the job. Semantic HTML first!

Skip Navigation

1<!-- First element inside <body> -->
2<a href="#main-content" class="skip-link">Skip to main content</a>
3
4<!-- On the main element -->
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:

HTML Element	ARIA Landmark Role
`<header>` (page-level)	`banner`
`<nav>`	`navigation`
`<main>`	`main`
`<aside>`	`complementary`
`<footer>` (page-level)	`contentinfo`
`<section>` (with label)	`region`
`<form>` (with label)	`form`

Alt Text Best Practices

Good vs Bad Alt Text

1<!-- BAD — generic, useless -->
2<img src="photo.jpg" alt="image">
3<img src="photo.jpg" alt="photo">
4<img src="photo.jpg" alt="">  <!-- ONLY for decorative images -->
5
6<!-- GOOD — descriptive and specific -->
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

Image Type	Alt Text Approach
Informational (photos, charts)	Describe what the image shows and why it matters
Functional (buttons, icons)	Describe the action: "Search", "Close menu"
Decorative (borders, spacers)	Use `alt=""` (empty) — screen readers will skip it
Complex (infographics, diagrams)	Brief alt + longer description nearby or via `aria-describedby`

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    <!-- Page title (appears in browser tab + search results) -->
3    <title>Ayesha Khan — Frontend Developer Portfolio</title>
4
5    <!-- Meta description (search result snippet, ~155 chars max) -->
6    <meta name="description" content="Portfolio of Ayesha Khan, a frontend developer specializing in React and Next.js.">
7
8    <!-- Author -->
9    <meta name="author" content="Ayesha Khan">
10</head>

Open Graph Tags (Social Sharing)

1<head>
2    <!-- What shows when shared on WhatsApp, Facebook, LinkedIn -->
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<!-- WRONG — meaningless structure -->
2<div id="header">
3    <div id="nav">...</div>
4</div>
5
6<!-- CORRECT — meaningful structure -->
7<header>
8    <nav>...</nav>
9</header>

2. Multiple `<main>` Elements

1<!-- WRONG — only one <main> per page -->
2<main>...</main>
3<main>...</main>
4
5<!-- CORRECT — use <section> within <main> -->
6<main>
7    <section>...</section>
8    <section>...</section>
9</main>

3. Using `<section>` as a Generic Wrapper

1<!-- WRONG — using section just for styling -->
2<section class="wrapper">...</section>
3
4<!-- CORRECT — use div for styling, section for meaning -->
5<div class="wrapper">...</div>

4. Missing Landmarks for Screen Readers

1<!-- WRONG — no way for screen reader to find content -->
2<div>Navigation here</div>
3<div>Main content here</div>
4
5<!-- CORRECT — landmarks created automatically -->
6<nav>Navigation here</nav>
7<main>Main content here</main>

5. Using ARIA When Semantic HTML Exists

1<!-- WRONG — redundant ARIA -->
2<nav role="navigation">...</nav>
3
4<!-- CORRECT — semantic element IS the landmark -->
5<nav>...</nav>
6
7<!-- CORRECT USE — adding clarity -->
8<nav aria-label="Main navigation">...</nav>

VS Code Shortcuts

Shortcut	Action
`!` + Tab	Generate HTML boilerplate (Emmet)
`Ctrl + /`	Toggle comment
`Alt + Shift + F`	Format/indent code
`Ctrl + D`	Select next occurrence of word
`Alt + ↑/↓`	Move line up/down
`Ctrl + Shift + P`	Open Command Palette
`Ctrl + Space`	Trigger autocomplete (shows semantic element options)
`F12`	Open DevTools from VS Code

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 you want	How to do it
Page header area	`<header>`
Navigation menu	`<nav>`
Primary page content	`<main>` (one per page)
Group related content	`<section>`
Self-contained content	`<article>`
Sidebar / tangential info	`<aside>`
Page footer area	`<footer>`
Skip to content link	`<a href="#main-content">Skip to main content</a>`
Label a nav for screen readers	`<nav aria-label="Main navigation">`
SEO page description	`<meta name="description" content="...">`
Social sharing preview	`<meta property="og:title" content="...">`
Decorative image (skip for SR)	`<img src="..." alt="">`
Informational image	`<img src="..." alt="Descriptive text here">`

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!

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.

Element	Purpose	When to Use
`<header>`	Introductory content or navigational aids	Page header, article header, section header
`<nav>`	Navigation links	Main menu, sidebar links, breadcrumbs
`<main>`	Primary content of the page	ONE per page — the core content
`<section>`	Thematic grouping of content	Chapters, tabs, grouped content with a heading
`<article>`	Self-contained, independently distributable content	Blog posts, news articles, product cards, comments
`<aside>`	Tangentially related content	Sidebars, pull quotes, related links, fun facts
`<footer>`	Footer for its nearest ancestor	Page footer, article footer (author bio, dates)

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<!-- NON-SEMANTIC (div soup) — AVOID -->
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<!-- SEMANTIC (meaningful) — USE THIS -->
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.

Attribute	Purpose	Example
`aria-label`	Provides a text label for elements	`<nav aria-label="Main navigation">`
`aria-labelledby`	Points to an element that labels this one	`<section aria-labelledby="about-heading">`
`role`	Defines what an element IS	`<div role="navigation">` (prefer `<nav>` instead)

The First Rule of ARIA: Don't use ARIA if a native HTML element can do the job. Semantic HTML first!

Skip Navigation

1<!-- First element inside <body> -->
2<a href="#main-content" class="skip-link">Skip to main content</a>
3
4<!-- On the main element -->
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:

HTML Element	ARIA Landmark Role
`<header>` (page-level)	`banner`
`<nav>`	`navigation`
`<main>`	`main`
`<aside>`	`complementary`
`<footer>` (page-level)	`contentinfo`
`<section>` (with label)	`region`
`<form>` (with label)	`form`

Alt Text Best Practices

Good vs Bad Alt Text

1<!-- BAD — generic, useless -->
2<img src="photo.jpg" alt="image">
3<img src="photo.jpg" alt="photo">
4<img src="photo.jpg" alt="">  <!-- ONLY for decorative images -->
5
6<!-- GOOD — descriptive and specific -->
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

Image Type	Alt Text Approach
Informational (photos, charts)	Describe what the image shows and why it matters
Functional (buttons, icons)	Describe the action: "Search", "Close menu"
Decorative (borders, spacers)	Use `alt=""` (empty) — screen readers will skip it
Complex (infographics, diagrams)	Brief alt + longer description nearby or via `aria-describedby`

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    <!-- Page title (appears in browser tab + search results) -->
3    <title>Ayesha Khan — Frontend Developer Portfolio</title>
4
5    <!-- Meta description (search result snippet, ~155 chars max) -->
6    <meta name="description" content="Portfolio of Ayesha Khan, a frontend developer specializing in React and Next.js.">
7
8    <!-- Author -->
9    <meta name="author" content="Ayesha Khan">
10</head>

Open Graph Tags (Social Sharing)

1<head>
2    <!-- What shows when shared on WhatsApp, Facebook, LinkedIn -->
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<!-- WRONG — meaningless structure -->
2<div id="header">
3    <div id="nav">...</div>
4</div>
5
6<!-- CORRECT — meaningful structure -->
7<header>
8    <nav>...</nav>
9</header>

2. Multiple `<main>` Elements

1<!-- WRONG — only one <main> per page -->
2<main>...</main>
3<main>...</main>
4
5<!-- CORRECT — use <section> within <main> -->
6<main>
7    <section>...</section>
8    <section>...</section>
9</main>

3. Using `<section>` as a Generic Wrapper

1<!-- WRONG — using section just for styling -->
2<section class="wrapper">...</section>
3
4<!-- CORRECT — use div for styling, section for meaning -->
5<div class="wrapper">...</div>

4. Missing Landmarks for Screen Readers

1<!-- WRONG — no way for screen reader to find content -->
2<div>Navigation here</div>
3<div>Main content here</div>
4
5<!-- CORRECT — landmarks created automatically -->
6<nav>Navigation here</nav>
7<main>Main content here</main>

5. Using ARIA When Semantic HTML Exists

1<!-- WRONG — redundant ARIA -->
2<nav role="navigation">...</nav>
3
4<!-- CORRECT — semantic element IS the landmark -->
5<nav>...</nav>
6
7<!-- CORRECT USE — adding clarity -->
8<nav aria-label="Main navigation">...</nav>

VS Code Shortcuts

Shortcut	Action
`!` + Tab	Generate HTML boilerplate (Emmet)
`Ctrl + /`	Toggle comment
`Alt + Shift + F`	Format/indent code
`Ctrl + D`	Select next occurrence of word
`Alt + ↑/↓`	Move line up/down
`Ctrl + Shift + P`	Open Command Palette
`Ctrl + Space`	Trigger autocomplete (shows semantic element options)
`F12`	Open DevTools from VS Code

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 you want	How to do it
Page header area	`<header>`
Navigation menu	`<nav>`
Primary page content	`<main>` (one per page)
Group related content	`<section>`
Self-contained content	`<article>`
Sidebar / tangential info	`<aside>`
Page footer area	`<footer>`
Skip to content link	`<a href="#main-content">Skip to main content</a>`
Label a nav for screen readers	`<nav aria-label="Main navigation">`
SEO page description	`<meta name="description" content="...">`
Social sharing preview	`<meta property="og:title" content="...">`
Decorative image (skip for SR)	`<img src="..." alt="">`
Informational image	`<img src="..." alt="Descriptive text here">`

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!

Lecture 2: Semantic HTML & Accessibility

What You'll Learn

Why This Matters

Before You Watch

Semantic HTML & Accessibility Cheatsheet

HTML5 Semantic Elements

Semantic Page Structure

Semantic vs Non-Semantic Comparison

Accessibility (A11y) Basics

ARIA (Accessible Rich Internet Applications)

Skip Navigation

Accessibility Landmarks

Alt Text Best Practices

Good vs Bad Alt Text

Alt Text Decision Guide

SEO Meta Tags

Essential Meta Tags

Open Graph Tags (Social Sharing)

Common Mistakes to Avoid

1. Div Soup (No Semantic Elements)

2. Multiple <main> Elements

3. Using <section> as a Generic Wrapper

4. Missing Landmarks for Screen Readers

5. Using ARIA When Semantic HTML Exists

VS Code Shortcuts

Chrome DevTools: Accessibility Tree

Quick Reference Table

What's Next?

Lecture 2: Semantic HTML & Accessibility

What You'll Learn

Why This Matters

Before You Watch

Semantic HTML & Accessibility Cheatsheet

HTML5 Semantic Elements

Semantic Page Structure

Semantic vs Non-Semantic Comparison

Accessibility (A11y) Basics

ARIA (Accessible Rich Internet Applications)

Skip Navigation

Accessibility Landmarks

Alt Text Best Practices

Good vs Bad Alt Text

Alt Text Decision Guide

SEO Meta Tags

Essential Meta Tags

Open Graph Tags (Social Sharing)

Common Mistakes to Avoid

1. Div Soup (No Semantic Elements)

2. Multiple <main> Elements

3. Using <section> as a Generic Wrapper

4. Missing Landmarks for Screen Readers

5. Using ARIA When Semantic HTML Exists

VS Code Shortcuts

Chrome DevTools: Accessibility Tree

Quick Reference Table

What's Next?

2. Multiple `<main>` Elements

3. Using `<section>` as a Generic Wrapper

2. Multiple `<main>` Elements

3. Using `<section>` as a Generic Wrapper