Semantic HTML5: semantic vs div soup
Replace meaningless wrapper divs with semantic elements and understand the document outline algorithm and heading hierarchy.
Div Soup — The Problem
Div soup is a page built entirely from <div> and <span> elements. It requires class names to communicate structure, can't be understood by screen readers without those classes, and sends no meaning to search engines.
<!-- Div soup (avoid) -->
<div class="container">
<div class="header">
<div class="logo">...</div>
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
</div>The Semantic Alternative
Replace meaningless divs with semantic elements that communicate purpose. The structure is now self-documenting and understandable without any CSS.
<!-- Semantic HTML (preferred) -->
<body>
<header>
<a href="/"><img src="logo.svg" alt="Brand"></a>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>All lessons in this course
- Form Controls: input types select textarea
- ARIA and Accessibility: label role aria-*
- Semantic HTML5: semantic vs div soup
- Form Validation Attributes