Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML vs Div Soup</title>
</head>
<body>
<div class="comparison">
<!-- Bad Example -->
<div class="example bad">
<h2>❌ Div Soup (Bad)</h2>
<div class="code-display">
<span class="bad-tag"><div class="header"></span>
<div class="logo">Site Logo</div>
<span class="bad-tag"><div class="nav"></span>
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
</div>
</div>
<span class="bad-tag"><div class="content"></span>
<span class="bad-tag"><div class="post"></span>
<div class="title">Article Title</div>
<div class="text">Content...</div>
</div>
<span class="bad-tag"><div class="sidebar"></span>
<div>Widget</div>
</div>
</div>
<span class="bad-tag"><div class="footer"></span>
<div>© 2024</div>
</div>
</div>
<div class="issues">
<h4>Problems:</h4>
<ul>
<li>No semantic meaning</li>
<li>Screen readers can't navigate</li>
<li>Poor SEO - search engines confused</li>
<li>Hard to maintain and understand</li>
<li>No document outline</li>
</ul>
</div>
</div>
<!-- Good Example -->
<div class="example good">
<h2>✅ Semantic HTML (Good)</h2>
<div class="code-display">
<span class="good-tag"><header></span>
<img src="logo.png" alt="Site Logo">
<span class="good-tag"><nav aria-label="Main"></span>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<span class="good-tag"><main></span>
<span class="good-tag"><article></span>
<span class="good-tag"><h1>Article Title</h1></span>
<span class="good-tag"><p>Content...</p></span>
</article>
<span class="good-tag"><aside></span>
<section>Widget</section>
</aside>
</main>
<span class="good-tag"><footer></span>
<p>© 2024</p>
</footer>
</div>
<div class="benefits">
<h4>Benefits:</h4>
<ul>
<li>Clear semantic meaning</li>
<li>Screen readers navigate easily</li>
<li>Better SEO - clear structure</li>
<li>Easy to maintain</li>
<li>Proper document outline</li>
</ul>
</div>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proper Heading Hierarchy</title>
</head>
<body>
<div class="container">
<h1>📑 Heading Hierarchy</h1>
<p class="subtitle">Proper heading structure is crucial for accessibility and SEO</p>
<div class="hierarchy">
<!-- Bad Example -->
<div class="outline-box bad">
<h3>❌ Bad Hierarchy</h3>
<div class="heading-tree">
<div class="level-1">h1: Page Title</div>
<div class="level-4">
<span class="skip-warning">⚠</span> h4: Subtitle (skipped h2, h3!)
</div>
<div class="level-2">h2: Section</div>
<div class="level-1">
<span class="skip-warning">⚠</span> h1: Another Title (second h1!)
</div>
<div class="level-3">h3: Subsection</div>
<div class="level-2">h2: Another Section</div>
</div>
<p style="color: #991b1b; margin-top: 15px; font-size: 0.9rem;">
✗ Skipped levels<br>
✗ Multiple h1 elements<br>
✗ Confusing structure
</p>
</div>
<!-- Good Example -->
<div class="outline-box good">
<h3>✅ Good Hierarchy</h3>
<div class="heading-tree">
<div class="level-1">h1: Page Title</div>
<div class="level-2">h2: Introduction</div>
<div class="level-2">h2: Main Section</div>
<div class="level-3">h3: Subsection A</div>
<div class="level-4">h4: Detail 1</div>
<div class="level-4">h4: Detail 2</div>
<div class="level-3">h3: Subsection B</div>
<div class="level-2">h2: Conclusion</div>
</div>
<p style="color: #065f46; margin-top: 15px; font-size: 0.9rem;">
✓ Sequential levels<br>
✓ One h1 per page<br>
✓ Clear structure
</p>
</div>
</div>
<div class="info-card">
<h4>📋 Heading Best Practices</h4>
<ul>
<li>Use only ONE h1 per page (page title)</li>
<li>Don't skip heading levels (h2 → h3, not h2 → h4)</li>
<li>Headings describe content, not for styling</li>
<li>Use CSS for sizing, not wrong heading level</li>
<li>Logical order - outline makes sense</li>
<li>Screen readers use headings to navigate</li>
</ul>
</div>
<div style="background: #dcfce7; padding: 20px; border-radius: 12px; border-left: 4px solid #10b981; margin-top: 20px;">
<h4 style="color: #065f46; margin-bottom: 10px;">💡 Quick Test</h4>
<p style="color: #166534; line-height: 1.6;">
Remove all styling and look at just the headings. Do they create a logical table
of contents? Can you understand the page structure from headings alone? If yes,
you have good heading hierarchy!
</p>
</div>
</div>
</body>
</html>Loading preview...
Introductory content - site header, article header, section header
<header><h1>Site Title</h1><nav>...</nav></header>Major navigation blocks - main menu, table of contents
<nav aria-label="Main"><a href="/">Home</a>...</nav>Primary content - only ONE per page, skip navigation and sidebars
<main><article>...</article></main>Self-contained content - blog post, news article, comment
<article><h2>Title</h2><p>Content...</p></article>Thematic grouping - chapter, tab panel, part of article
<section><h2>Chapter 1</h2><p>...</p></section>Tangentially related - sidebar, callout, related links
<aside><h3>Related</h3><ul>...</ul></aside>Footer content - copyright, author info, related links
<footer><p>© 2024</p><nav>...</nav></footer>