♿ Semantic HTML = Inclusive Web
Your website should work for everyone. Semantic HTML elements create accessible, SEO-friendly, and maintainable web pages that serve all users.
❌ Div Soup (Accessibility Nightmare)
<div class="header">
<div class="logo">Logo</div>
<div class="nav">
<div class="item">Home</div>
<div class="item">About</div>
</div>
</div>
<div class="main">
<div class="article">
<div class="title">Title</div>
<div class="content">Content</div>
</div>
</div>
<div class="footer">Footer</div>
✅ Semantic HTML (Accessible & SEO)
<header>
<img src="logo.png" alt="Company Logo" />
<nav aria-label="Main Navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Article content...</p>
</article>
</main>
<footer>Footer content</footer>
📝 Complete Semantic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accessible Web Page</title>
</head>
<body>
<header role="banner">
<nav role="navigation" aria-label="Main menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main role="main">
<article aria-labelledby="article-title">
<h1 id="article-title">How to Build Accessible Websites</h1>
<section aria-labelledby="section-title">
<h2 id="section-title">Why Accessibility Matters</h2>
<p>Content about accessibility...</p>
</section>
<aside role="complementary" aria-label="Related Content">
<h2>Related Articles</h2>
<ul>
<li><a href="/article-1">Article 1</a></li>
<li><a href="/article-2">Article 2</a></li>
</ul>
</aside>
</article>
</main>
<footer role="contentinfo">
<p>© 2024 Accessible Web. All rights reserved.</p>
</footer>
</body>
</html>
💡 ARIA Best Practices
- Use native HTML elements before adding ARIA (they’re already accessible)
- Add aria-label for elements without visible text (like icons)
- Use aria-hidden=”true” for decorative elements
- Use aria-live for dynamic content updates
- Test with screen readers (NVDA, VoiceOver, JAWS)
“Semantic HTML is the foundation of web accessibility. It ensures that everyone, regardless of ability, can access and interact with your content. It’s not just a best practice—it’s a responsibility.”