Choosing the right semantic element depends on content purpose, not appearance.
Decision Guide
Is it the page header?
├── Yes → <header>
└── No → Continue
Is it navigation?
├── Yes → <nav>
└── No → Continue
Is it the main content?
├── Yes → <main>
└── No → Continue
Is it a self-contained piece?
├── Yes → <article>
└── No → Continue
Is it a thematic group?
├── Yes → <section>
└── No → Continue
Is it sidebar/complementary?
├── Yes → <aside>
└── No → Continue
Is it the page footer?
├── Yes → <footer>
└── No → Use <div>
Common Mistakes
<!-- ❌ Don't use header/footer for every element -->
<article>
<header>Post title</header>
<p>Content</p>
<footer>Author</footer>
</article>
<!-- ✅ This is actually correct for article headers/footers -->
<!-- ❌ Don't use section just for styling -->
<section class="red-box">Styled content</section>
<!-- ✅ Use div for styling only -->
<div class="red-box">Styled content</div>
<!-- ❌ Don't skip heading levels -->
<h1>Title</h1>
<h3>Subtitle</h3> <!-- Skipped h2! -->
<!-- ✅ Maintain heading hierarchy -->
<h1>Title</h1>
<h2>Subtitle</h2>
Article vs Section
<!-- Article: Self-contained, distributable -->
<article>
<h2>Blog Post</h2>
<p>Content that makes sense on its own...</p>
</article>
<!-- Section: Thematic grouping within a larger context -->
<section>
<h2>Chapter 1</h2>
<p>Part of a larger document...</p>
</section>
<!-- Can nest: section inside article -->
<article>
<section>
<h2>Introduction</h2>
<p>...</p>
</section>
<section>
<h2>Conclusion</h2>
<p>...</p>
</section>
</article>
Multiple Headers/Footers
<!-- Page-level header -->
<header>
<h1>Site Name</h1>
<nav>...</nav>
</header>
<!-- Article-level header -->
<article>
<header>
<h2>Post Title</h2>
<time>2024-01-15</time>
</header>
<p>Content...</p>
</article>
<!-- Footer can appear multiple times too -->
Quiz
1. What is the purpose of semantic HTML?
Semantic HTML makes code meaningful, improves accessibility, and helps SEO.
2. Which element should contain the main navigation?
<nav> is specifically for navigation links and is recognized by screen readers as a landmark.
3. What is the difference between <article> and <section>?
<article> is self-contained and makes sense on its own. <section> is a thematic grouping within a larger context.
4. Why should you not skip heading levels?
Screen readers allow users to navigate by headings. Skipping levels breaks this navigation structure.
Flashcards
Question
What are semantic HTML elements?
Click to reveal answer
Answer
Elements that clearly describe their meaning (header, nav, main, article, section, aside, footer).
Question
When should you use <article>?
Click to reveal answer
Answer
For self-contained content that makes sense on its own (blog posts, news articles, comments).
Question
What are the benefits of semantic HTML?
Click to reveal answer
Answer
Better accessibility, SEO, maintainability, internationalization, and browser feature support.
Question
What is the <main> element for?
Click to reveal answer
Answer
Contains the main content of the page. Should only appear once per page and not be nested in other landmarks.
Revision Notes
Key Takeaways
1. Semantic HTML describes meaning, not appearance
2. Use semantic elements instead of divs with classes