Bits of .NET

📈 Semantic HTML = SEO & Accessibility

Search engines and screen readers love semantic markup. Semantic HTML improves SEO, accessibility, and maintainability.

📝 Semantic HTML Elements

<header> - Site header
<nav> - Navigation
<main> - Main content (one per page)
<article> - Self-contained content
<section> - Thematic grouping
<aside> - Sidebar content
<footer> - Page footer

<figure> - Media with caption
<figcaption> - Figure caption
<details> - Expandable content
<summary> - Details summary

<time> - Date/time
<mark> - Highlighted text
<address> - Contact info
<cite> - Citation
<blockquote> - Block quote

# SEO Benefits
- Search engines understand structure
- Better indexing
- Rich snippets
- Improved ranking

# Accessibility Benefits
- Screen readers navigate easily
- ARIA labels not needed
- Keyboard navigation works
- Better user experience

🎯 Advanced Semantic Patterns

<article>
    <header>
        <h1>Article Title</h1>
        <time datetime="2024-01-15">January 15, 2024</time>
        <address>By <a href="/author">John Doe</a></address>
    </header>
    
    <section>
        <h2>Section Heading</h2>
        <p>Content paragraph...</p>
        <figure>
            <img src="image.jpg" alt="Image description" />
            <figcaption>Image caption</figcaption>
        </figure>
    </section>
    
    <footer>
        <nav>
            <ul>
                <li>Previous article</li>
                <li>Next article</li>
            </ul>
        </nav>
    </footer>
</article>

<aside>
    <h2>Related Articles</h2>
    <ul>
        <li><a href="/article-1">Article 1</a></li>
        <li><a href="/article-2">Article 2</a></li>
    </ul>
</aside>

💡 Semantic HTML Tips

• Use <nav> for navigation menus
• Use <main> only once per page
• Use <article> for blog posts
• Use <section> for content groups
• Use <aside> for related content