HTML Guide 2026: Modern Semantic HTML
A modern HTML guide for 2026 — semantic markup, accessibility, forms, media, and the tags that actually matter.
Semantic Structure
Every page: header, nav, main, footer.
Content: article for standalone posts, section for grouped content, aside for tangential.
Landmarks let screen readers, search engines, and LLMs understand the page hierarchy.
Headings
One h1 per page, matching the page's primary topic.
h2–h6 in strict hierarchy — never skip levels for styling.
Headings define the outline extracted by AI Overviews.
Modern Forms
Native input types: email, tel, url, date, color, file, number, range.
Native validation: required, pattern, minlength/maxlength — often sufficient without JS.
label + for for every input. fieldset + legend for grouped inputs.
Semantic elements cheat-sheet
| Element | Use for |
|---|---|
| <header> | Site or article header |
| <nav> | Primary navigation |
| <main> | Primary content (one per page) |
| <article> | Standalone content |
| <section> | Thematic grouping with a heading |
| <aside> | Tangential content |
| <footer> | Site or article footer |
| <figure>/<figcaption> | Images with captions |
Media
picture + source for responsive images (AVIF → WebP → JPG fallback).
loading="lazy" on below-fold images.
video with poster, controls, and captions via track elements.
Interactive Elements
dialog for native modals (native focus trap + backdrop).
details/summary for accordions.
popover attribute for tooltips and popovers (2024+ baseline).
search element for search regions (2024).
Accessibility
Semantic HTML gets you 80% of accessibility for free.
Add ARIA only when native HTML can't express the pattern.
Test with keyboard-only navigation and a screen reader.
SEO-Relevant Tags
title, meta description, canonical, meta robots.
Open Graph + Twitter Card meta.
link rel="alternate" for hreflang.
JSON-LD schema inside script tags.
Frequently Asked Questions
Is div bad?+
Not bad, but overused. Reach for semantic elements first; div is the fallback for pure styling containers.
Do I still need ARIA?+
Sometimes — for custom widgets (tabs, comboboxes, tree views) where native HTML falls short. Prefer semantic HTML first.
What about custom elements?+
Web Components are viable in 2026, but semantic HTML fallback matters for accessibility and SEO.
Does HTML affect SEO?+
Yes — semantic structure helps search engines parse content and improves AI-Overview extraction.
Are dialog and popover safe to use?+
Both are widely supported in 2026. Popover reached Baseline in 2024.