Web Development5 min read

HTML5 & Semantic Markup

Write semantic, accessible HTML5 - using the right elements, ARIA when needed, structured data, and standards that improve SEO and screen reader support.

HTML5Semantic HTMLAccessibilitySEOWeb Standards

skill: HTML5 & Semantic Markup category: Web Development tags: [HTML5, Semantic HTML, Accessibility, SEO, Web Standards] readingTime: 5

HTML is the most undervalued web technology. Semantic HTML provides meaning - to browsers, search engines, and assistive technologies - at zero cost. Using <div> for everything is not just aesthetically wrong; it actively harms SEO, accessibility, and maintainability. The right element is always more valuable than a styled div.

Workflow

Use semantic sectioning elementsSemantic elements communicate structure and meaning - a screen reader announces <nav> as 'navigation region', making the page navigable without visual cues.
Write accessible formsForms are the primary interaction point of the web and the most common accessibility failure. Labels, error messages, and keyboard access are non-negotiable.
Add structured data with JSON-LDJSON-LD structured data enables rich results in Google Search - star ratings, breadcrumbs, FAQ dropdowns, and event listings - directly from your HTML.
Optimize head metadataThe <head> section controls how the page appears in search results, social shares, and browser tabs - poorly configured metadata reduces CTR and shareability.
Use ARIA only when neededARIA (Accessible Rich Internet Applications) extends HTML for dynamic widgets - but adding ARIA incorrectly is worse than adding none. Native HTML elements are always preferred.

Output Format

Semantic HTML: proper sectioning, accessible forms, JSON-LD structured data, and ARIA for dynamic content.

HTML checklist:
☐ <main> wraps primary content (one per page)
☐ All images have meaningful alt text (or alt='' for decorative)
☐ All form inputs have <label for=''>
☐ Heading levels are sequential (h1→h2→h3, no skipping)
☐ JSON-LD structured data for articles/products/FAQ
☐ Open Graph + Twitter Card meta tags
☐ Canonical URL link

Examples

Input

Output

Edge Cases & Gotchas

Multiple h1 elements - Pre-HTML5 convention allows one h1 per page. HTML5 allows one h1 per sectioning element, but Google still recommends one h1 per page for the primary keyword. Don't skip heading levels (h1 → h3).
Lazy-loaded images and LCP - Adding loading='lazy' to the Largest Contentful Paint (LCP) image delays it and hurts Core Web Vitals. Only lazy-load below-the-fold images; keep above-fold images eager.
iframes and accessibility - Every <iframe> needs a title attribute: <iframe title='Payment form' src='...'></iframe> - screen readers announce the title when the user encounters the iframe.
Empty anchor tags - Anchor tags used as buttons (<a href='#' onclick='...'>) are focus traps and confuse screen readers. Use <button> for actions and <a href='real-url'> for navigation.

When to Break These Rules

Skip ARIA for fully server-rendered pages that don't have dynamic content - semantic HTML is sufficient and ARIA adds complexity without benefit.
Use a design system (Radix UI, shadcn/ui, Headless UI) instead of hand-coding ARIA patterns for dropdowns, modals, and tooltips - these are notoriously hard to get right.

Reference Files

https://web.dev/learn/html/
https://www.w3.org/WAI/ARIA/apg/