Semantic HTML - Best Practices & Examples

📚 What is Semantic HTML?

📌 Key Concept

Semantic HTML uses tags that clearly describe their meaning to both the browser and developer. Instead of using <div> for everything, semantic tags like <header>, <nav>, <article>, <footer> give meaning to the content structure.

Why Use Semantic HTML?

Accessibility: Screen readers and assistive technologies understand content structure
SEO: Search engines better understand page content and structure
Readability: Code is easier to understand for developers
Compliance: Meets web accessibility standards (WCAG)
Maintainability: Easier to update and maintain code

Common Semantic Elements

Element	Purpose	Use Case
<header>	Page or section header	Logo, navigation, title
<nav>	Navigation links	Menu, breadcrumbs
<main>	Main content	Primary content of page
<article>	Independent article	Blog post, news article
<section>	Content section	Grouped related content
<aside>	Sidebars/related content	Sidebar, ads, related posts
<footer>	Page or section footer	Copyright, links, contact info
<figure>	Self-contained illustration	Images with captions
<time>	Date/time	Publication date, event time

💻 Code Examples

📝 Example 1: Semantic Page Structure

<!DOCTYPE html>
<html>
<body>
    <header>
        <h1>My Website</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>
            <h2>Article Title</h2>
            <p>Article content...</p>
        </article>
        
        <aside>
            <h3>Related Posts</h3>
            <ul>
                <li><a href="#">Post 1</a></li>
                <li><a href="#">Post 2</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>
</html>

📝 Example 2: Semantic Article with Figure

<article>
    <h2>Web Design Tips</h2>
    <p>Published <time datetime="2024-01-15">January 15, 2024</time></p>
    
    <p>Introduction to web design...</p>
    
    <figure>
        <img src="design.jpg" alt="Web Design">
        <figcaption>Good design improves user experience</figcaption>
    </figure>
    
    <p>More content...</p>
</article>

⚖️ Non-Semantic vs Semantic

❌ Non-Semantic (Not Recommended)

<div class="header">
    <div class="logo">Logo</div>
    <div class="nav">
        <div><a href="/">Home</a></div>
    </div>
</div>

✅ Semantic (Recommended)

<header>
    <h1>Logo</h1>
    <nav>
        <a href="/">Home</a>
    </nav>
</header>

✍️ Practice Assignments

🎯 Assignment 1: Convert Non-Semantic to Semantic

Easy

Take an existing HTML document with div-based layout and convert it to use semantic elements.

🎯 Assignment 2: Build Semantic Article Page

Medium

Create a complete blog article with semantic HTML including header, nav, article, aside, and footer.

🎯 Assignment 3: Semantic E-commerce Page

Hard

Build a product page with semantic HTML, including proper use of header, nav, main, article, aside, and footer. Include product information, reviews, and related items.

🎓 Key Takeaways

Semantic HTML uses meaningful tags to describe content
Use header, nav, main, article, section, aside, footer for structure
Semantic HTML improves accessibility and SEO
Code is more maintainable and readable with semantic tags
Always prioritize semantic HTML over generic div/span

🏗️ Semantic HTML