Semantic HTML & Accessibility

Semantic HTML gives meaning to content and creates a clear document outline for users, screen readers, and search engines. Accessibility (a11y) builds on semantics to ensure everyone can use your site regardless of ability, device, or context.

Why Semantic Elements Matter

Structure

Use landmarks like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to create a navigable outline.

Accessibility

Screen readers rely on headings and landmarks. Strong semantics reduces the extra ARIA you need.

SEO

Search engines infer importance from headings, lists, and structure — semantics help them help you.

Examples with Images & Captions

Computer keyboard close-up, representing user input and accessibility concepts — Provide meaningful **alt** text describing an image’s purpose. Decorative images may use `alt=""`.

Abstract UI illustration suggesting navigation and landmark regions — Landmarks + headings let assistive tech jump to sections efficiently.

ARIA: When (and When Not) to Use It

Use native elements first. Prefer <button> over a clickable <div>.
Don’t duplicate roles. Avoid adding roles to elements that already have implicit roles (e.g., <nav>).
Labels matter. Use aria-label or aria-labelledby when there’s no visible label.

Accessible Table Example

Tables benefit from captions, scoped headers, and clear column meaning:

Semantic vs. Non-Semantic HTML
Semantic	Use Case	Non-Semantic Equivalent
`<article>`	Self-contained piece of content	`<div class="article">`
`<nav>`	Primary or secondary navigation	`<div id="nav">`
`<main>`	Unique primary page content	`<div id="main">`

Prefer semantic elements over generic containers when conveying meaning.

Quick A11y Checklist

One <h1> per page; descend logically with h2, h3, …
All images have purposeful alt (or empty alt for decorative images).
Links are descriptive (e.g., “View syllabus” over “Click here”).
Focusable controls show a visible focus ring.
Color contrast meets WCAG AA where possible.