Semantic HTML: The Foundation of Accessibility (That Everyone Ignores)

Semantic HTML means using HTML elements for their intended purpose. for buttons, for navigation, for article content. Not , not , not . Sounds simple, right? Yet most modern web development ignores semantics entirely. Divs everywhere, JavaScript frameworks that output meaningless markup, component libraries that prioritize flexibility over meaning. Here's why semantic HTML matters: assistive technologies rely on HTML semantics to understand page structure and meaning. Screen readers announce "button" when encountering , "navigation region" for , "heading level 2" for . They announce nothing for . Semantic HTML is the foundation of accessibility. ARIA and other techniques can patch gaps, but nothing replaces proper HTML. Start with semantics, enhance with ARIA only when necessary.

The Div Disease (And How to Cure It)

Div-itis: the overuse of non-semantic and elements when semantic alternatives exist. Bad: Home Article Title Content here Good: Home Article Title Content here The semantic version: - Works with screen readers out of the box - Allows landmark navigation (jump directly to nav, main, etc.) - Provides clear document structure - Requires no ARIA patches - Is easier to style (nav ul li instead of .nav .menu-item) Divs aren't evil – they're for grouping when no semantic element fits. But they're the last resort, not the default.

Semantic HTML - Complete Guide | Web Accessibility Glossary

Semantic Elements You Should Actually Use

HTML has over 100 elements. Most developers use about 10. Here are the semantic elements that matter for accessibility:

Document Structure: -

: Page or section header (not just any heading) -

Semantic HTML

📋 Complete Guide Contents

Semantic HTML: The Foundation of Accessibility (That Everyone Ignores)

Semantic Elements You Should Actually Use