🎯 Semantic HTML

Meaningful Structure

What is Semantic HTML?

Semantic HTML uses tags that clearly describe their meaning and purpose. This improves accessibility, SEO, and code readability.

💻 Semantic Elements

<!-- Page structure -->
<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

<main>
    <article>
        <h1>Article Title</h1>
        <p>Article content...</p>
    </article>
    
    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>© 2025 Company Name</p>
</footer>

🔧 Content Sections

<!-- Article (self-contained content) -->
<article>
    <h2>Blog Post Title</h2>
    <p>Published: <time datetime="2025-01-15">January 15, 2025</time></p>
    <p>Post content goes here...</p>
</article>

<!-- Section (thematic grouping) -->
<section>
    <h2>Services</h2>
    <p>We offer various services...</p>
</section>

<!-- Aside (related content) -->
<aside>
    <h3>About the Author</h3>
    <p>Bio information...</p>
</aside>

<!-- Figure with caption -->
<figure>
    <img src="chart.jpg" alt="Sales Chart">
    <figcaption>2025 Sales Data</figcaption>
</figure>

🎨 Non-Semantic vs Semantic

<!-- ❌ Non-Semantic (Bad) -->
<div id="header">
    <div id="nav">
        <a href="/">Home</a>
    </div>
</div>
<div id="main">
    <div class="post">
        <div class="title">Title</div>
        <div class="content">Content...</div>
    </div>
</div>
<div id="footer">Footer</div>

<!-- ✅ Semantic (Good) -->
<header>
    <nav>
        <a href="/">Home</a>
    </nav>
</header>
<main>
    <article>
        <h1>Title</h1>
        <p>Content...</p>
    </article>
</main>
<footer>Footer</footer>

📋 Complete Page Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic Page</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>Article Title</h2>
                <p>By <address>John Doe</address></p>
                <time datetime="2025-01-15">Jan 15, 2025</time>
            </header>
            
            <section>
                <h3>Introduction</h3>
                <p>Article introduction...</p>
            </section>
            
            <section>
                <h3>Main Content</h3>
                <p>Article body...</p>
            </section>
        </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>© 2025 My Website</p>
    </footer>
</body>
</html>

🎯 Key Takeaways