Skip to content
beginnerPhase 30 · HTML

Semantic HTML

Use semantic elements like header, nav, main, article, section for meaningful markup.

30m
0 problems
Topic Progress0%

Why Semantic HTML

Semantic HTML uses elements that clearly describe their meaning to both browsers and developers.

Non-Semantic vs Semantic

<!-- Non-Semantic (bad) -->
<div class="header">
    <div class="nav">...</div>
</div>
<div class="main">
    <div class="article">...</div>
    <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- Semantic (good) -->
<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
    <aside>...</aside>
</main>
<footer>...</footer>

Benefits of Semantic HTML

Benefit Description
Accessibility Screen readers can navigate by landmarks
SEO Search engines understand content structure
Maintainability Code is self-documenting
Internationalization Better translation support
Browser features Reader mode, find-in-page work better

How Screen Readers Use Semantics

Screen reader announces:
"Navigation landmark"
"Heading level 1: Page Title"
"Article: Blog Post"
"Link: Read more"

Without semantics:
"Group"
"Group"
"Text"

SEO Impact

Search engines understand:
<article> = Main content
<nav> = Navigation
<header> = Page header
<footer> = Copyright, links

Better indexing and rich snippets!

Semantic Elements

HTML5 introduced many semantic elements that replace generic divs.

Page Structure

<header>    <!-- Introductory content, navigation -->
<nav>       <!-- Navigation links -->
<main>      <!-- Main content of page -->
<section>   <!-- Thematic grouping -->
<article>   <!-- Self-contained content -->
<aside>     <!-- Sidebar content -->
<footer>    <!-- Footer information -->

Content Elements

<h1>-<h6>    <!-- Headings (h1 = most important) -->
<p>          <!-- Paragraph -->
<blockquote> <!-- Quoted content -->
<pre>        <!-- Preformatted text -->
<figure>     <!-- Image with caption -->
<figcaption> <!-- Caption for figure -->

Inline Semantic

<strong>  <!-- Important text (bold) -->
<em>      <!-- Emphasized text (italic) -->
<mark>    <!-- Highlighted text -->
<small>   <!-- Side comment -->
<del>     <!-- Deleted text -->
<ins>     <!-- Inserted text -->
<sub>     <!-- Subscript -->
<sup>     <!-- Superscript -->
<code>    <!-- Code snippet -->
<abbr>    <!-- Abbreviation -->
<time>    <!-- Date/time -->

List Elements

<ul>    <!-- Unordered list -->
<ol>    <!-- Ordered list -->
<li>    <!-- List item -->
<dl>    <!-- Description list -->
<dt>    <!-- Description term -->
<dd>    <!-- Description definition -->

Complete Page Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>Blog Post Title</h2>
                <time datetime="2024-01-15">January 15, 2024</time>
            </header>
            
            <section>
                <h3>Introduction</h3>
                <p>Article content...</p>
            </section>
            
            <section>
                <h3>Main Points</h3>
                <p>More content...</p>
            </section>
            
            <footer>
                <p>Written by <address>Author Name</address></p>
            </footer>
        </article>
        
        <aside>
            <h3>Related Posts</h3>
            <ul>
                <li><a href="/post1">Post 1</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2024 My Blog</p>
    </footer>
</body>
</html>

When to Use Each

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 -->

Practice Problems

0/3solved
Build Semantic HTML Component

Create a reusable React component implementing Semantic HTML. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
Semantic HTML Testing

Write unit and integration tests for Semantic HTML using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
Semantic HTML Performance

Optimize Semantic HTML for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What is the purpose of semantic HTML?

Question 1 options

2. Which element should contain the main navigation?

Question 2 options

3. What is the difference between <article> and <section>?

Question 3 options

4. Why should you not skip heading levels?

Question 4 options

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.

Question

What is Semantic HTML?

Click to reveal answer

Answer

Semantic HTML is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.Semantic HTML describes meaning, not appearance
  • 2.Use semantic elements instead of divs with classes
  • 3.Semantic HTML improves accessibility and SEO
  • 4.Maintain proper heading hierarchy (h1 → h2 → h3)
  • 5.Use <article> for self-contained content, <section> for groupings

Interview Tips

  • •Know the most common semantic elements and when to use them
  • •Explain the benefits of semantic HTML for accessibility
  • •Understand the difference between article and section
  • •Know how screen readers use semantic elements

Cheat Sheet

Semantic HTML Cheat Sheet

Page Structure:

  • : Introductory content
  • : Main page content
  • : Thematic grouping
  • : Self-contained content
  • : Footer information

Content:

  • -

    : Headings

  • : Paragraph

  • /
    : Image with caption
  • : Quoted content

Inline:

  • /: Important/emphasized
  • : Highlighted
  • : Code snippet

Benefits:

  • Accessibility
  • SEO
  • Maintainability
  • Self-documenting