HTML & JS Topic

Semantic HTML

What is Semantic HTML?

Non-Semantic (Bad) Example:

html

<div id="header">
    <div class="nav">
        <div class="nav-item">Home</div>
        <div class="nav-item">About</div>
    </div>
</div>

<div class="main-content">
    <div class="section">
        <div class="article">
            <div class="title">Blog Post</div>
        </div>
    </div>
</div>

<div id="footer">
    <div>Copyright info</div>
</div>

Semantic (Good) Example:

html

<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <header>
            <h1>Blog Post Title</h1>
        </header>
        <section>
            <p>Article content...</p>
        </section>
    </article>
</main>

<footer>
    <p>Copyright information</p>
</footer>

Core Semantic Elements

1. <header> - Introductory Content

html

<!-- Page header (most common) -->
<header>
    <h1>Website Name</h1>
    <p>Tagline or description</p>
</header>

<!-- Article header -->
<article>
    <header>
        <h2>Article Title</h2>
        <p>By <span class="author">John Doe</span></p>
        <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    <p>Article content...</p>
</article>

<!-- Section header -->
<section>
    <header>
        <h3>Chapter 1: Introduction</h3>
        <p>Getting started with the topic</p>
    </header>
    <p>Chapter content...</p>
</section>

<!-- Multiple headers per page are allowed! -->
<header class="site-header">...</header>
<article>
    <header class="article-header">...</header>
</article>

2. <footer> - Closing Content

html

<!-- Page footer -->
<footer>
    <p>&copy; 2024 My Company. All rights reserved.</p>
    <address>
        Contact us at <a href="mailto:info@example.com">info@example.com</a>
    </address>
    <nav>
        <a href="/privacy">Privacy Policy</a> |
        <a href="/terms">Terms of Service</a>
    </nav>
</footer>

<!-- Article footer -->
<article>
    <h2>How to Use Semantic HTML</h2>
    <p>Content...</p>
    <footer>
        <p>Last updated: <time datetime="2024-01-15">Jan 15, 2024</time></p>
        <div class="tags">
            <span class="tag">HTML</span>
            <span class="tag">Web Development</span>
        </div>
    </footer>
</article>

<!-- Section footer -->
<section>
    <h3>References</h3>
    <ul>
        <li>Reference 1</li>
        <li>Reference 2</li>
    </ul>
    <footer>
        <small>References compiled by Research Team</small>
    </footer>
</section>

3. <nav> - Navigation Sections

html

<!-- Main site navigation -->
<nav aria-label="Main Navigation">
    <ul>
        <li><a href="/" aria-current="page">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<!-- Multiple navigation sections -->
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/electronics">Electronics</a></li>
        <li>Smartphones</li>
    </ol>
</nav>

<nav aria-label="Related Articles">
    <h3>Related Topics</h3>
    <ul>
        <li><a href="/html-basics">HTML Basics</a></li>
        <li><a href="/css-guide">CSS Guide</a></li>
    </ul>
</nav>

<!-- In-page navigation -->
<nav>
    <h2>Table of Contents</h2>
    <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#benefits">Benefits</a></li>
        <li><a href="#examples">Examples</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
    </ul>
</nav>

4. <main> - Primary Content

html

<!DOCTYPE html>
<html>
<body>
    <header>...</header>
    
    <main>
        <h1>Welcome to Our Website</h1>
        <p>This is the main content area.</p>
        
        <article>
            <h2>Featured Article</h2>
            <p>Content...</p>
        </article>
    </main>
    
    <aside>...</aside>
    <footer>...</footer>
</body>
</html>

<!-- Only one <main> per page! -->
<!-- BAD: Multiple main elements -->
<!-- GOOD: One main element containing all primary content -->

5. <article> - Self-Contained Content

html

<!-- Blog post -->
<article>
    <header>
        <h2>The Future of Web Development</h2>
        <p>By Sarah Johnson • <time datetime="2024-01-15">January 15, 2024</time></p>
    </header>
    
    <section>
        <h3>Introduction</h3>
        <p>Web development is evolving rapidly...</p>
    </section>
    
    <section>
        <h3>Trends to Watch</h3>
        <p>Artificial intelligence is changing...</p>
    </section>
    
    <footer>
        <p>Share this article:</p>
        <!-- Social sharing buttons -->
    </footer>
</article>

<!-- News article -->
<article>
    <h2>Breaking News: Major Tech Announcement</h2>
    <p>Today, a leading tech company announced...</p>
    <figure>
        <img src="news-image.jpg" alt="Tech conference">
        <figcaption>CEO presenting at the conference</figcaption>
    </figure>
</article>

<!-- Forum post -->
<article>
    <h3>Question about Semantic HTML</h3>
    <p>Posted by: <strong>beginner_dev</strong></p>
    <p>I'm having trouble understanding when to use section vs article...</p>
    
    <!-- Nested article (reply) -->
    <article>
        <h4>Re: Question about Semantic HTML</h4>
        <p>Posted by: <strong>experienced_dev</strong></p>
        <p>Here's how I understand the difference...</p>
    </article>
</article>

<!-- Product card -->
<article class="product-card">
    <img src="product.jpg" alt="Wireless Headphones">
    <h3>Premium Wireless Headphones</h3>
    <p>$199.99</p>
    <button>Add to Cart</button>
</article>

6. <section> - Thematic Grouping

html

<!-- Chapter sections -->
<article>
    <h1>Complete Guide to HTML</h1>
    
    <section id="introduction">
        <h2>Introduction to HTML</h2>
        <p>HTML is the foundation of web development...</p>
    </section>
    
    <section id="elements">
        <h2>HTML Elements</h2>
        <p>Elements are the building blocks...</p>
        
        <!-- Nested section -->
        <section id="semantic-elements">
            <h3>Semantic Elements</h3>
            <p>Semantic elements describe their meaning...</p>
        </section>
    </section>
</article>

<!-- FAQ page sections -->
<main>
    <h1>Frequently Asked Questions</h1>
    
    <section aria-labelledby="general-questions">
        <h2 id="general-questions">General Questions</h2>
        <div class="faq-item">
            <h3>What is your return policy?</h3>
            <p>We accept returns within 30 days...</p>
        </div>
    </section>
    
    <section aria-labelledby="shipping-questions">
        <h2 id="shipping-questions">Shipping Questions</h2>
        <div class="faq-item">
            <h3>How long does shipping take?</h3>
            <p>Standard shipping takes 5-7 business days...</p>
        </div>
    </section>
</main>

<!-- Profile page sections -->
<main>
    <h1>User Profile</h1>
    
    <section class="profile-info">
        <h2>Personal Information</h2>
        <p>Name: John Doe</p>
        <p>Email: john@example.com</p>
    </section>
    
    <section class="order-history">
        <h2>Recent Orders</h2>
        <table>...</table>
    </section>
    
    <section class="preferences">
        <h2>Account Preferences</h2>
        <form>...</form>
    </section>
</main>

7. <aside> - Related Content

html

<!-- Sidebar content -->
<aside>
    <h3>About the Author</h3>
    <p>John Doe is a web developer with 10 years of experience...</p>
    
    <h3>Related Articles</h3>
    <ul>
        <li><a href="/css-guide">Complete CSS Guide</a></li>
        <li><a href="/javascript-basics">JavaScript Basics</a></li>
    </ul>
</aside>

<!-- Pull quote within article -->
<article>
    <h2>The Importance of Accessibility</h2>
    <p>Web accessibility ensures that everyone can use websites...</p>
    
    <aside>
        <blockquote>
            "The power of the Web is in its universality. Access by everyone 
            regardless of disability is an essential aspect."
            <cite>Tim Berners-Lee</cite>
        </blockquote>
    </aside>
    
    <p>Continuing with the article content...</p>
</aside>

<!-- Advertisement -->
<aside aria-label="Advertisement">
    <div class="ad">
        <h3>Sponsored Content</h3>
        <p>Try our new web development course!</p>
        <a href="/course">Learn More</a>
    </div>
</aside>

<!-- Complementary information -->
<main>
    <article>
        <h1>Understanding Climate Change</h1>
        <p>Main article content...</p>
    </article>
    
    <aside>
        <h2>Quick Facts</h2>
        <ul>
            <li>Global temperature has risen 1.1°C since 1880</li>
            <li>Sea levels are rising 3.3mm per year</li>
        </ul>
    </aside>
</main>

Complete Page Structure Examples

Example 1: Blog Post

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Future of Web Development | Tech Blog</title>
</head>
<body>
    <!-- Site Header -->
    <header class="site-header">
        <div class="logo">
            <h1><a href="/">Tech Insights</a></h1>
        </div>
        
        <nav aria-label="Main Navigation">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/articles">Articles</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Main Content -->
    <main class="content">
        <!-- Article -->
        <article class="blog-post">
            <header>
                <h1>The Future of Web Development: 2024 Trends</h1>
                <div class="meta">
                    <p>By <a href="/author/sarah" rel="author">Sarah Chen</a></p>
                    <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
                    <p>Reading time: 5 minutes</p>
                </div>
            </header>

            <!-- Table of Contents -->
            <nav class="toc" aria-label="Table of Contents">
                <h2>Contents</h2>
                <ol>
                    <li><a href="#ai-integration">AI Integration</a></li>
                    <li><a href="#webassembly">WebAssembly</a></li>
                    <li><a href="#progressive-web-apps">Progressive Web Apps</a></li>
                </ol>
            </nav>

            <!-- Article Sections -->
            <section id="ai-integration">
                <h2>1. AI Integration in Development</h2>
                <p>Artificial intelligence is revolutionizing how we build websites...</p>
                
                <aside>
                    <h3>Did You Know?</h3>
                    <p>GitHub Copilot can write up to 40% of code in some projects.</p>
                </aside>
                
                <p>Continuing with AI trends...</p>
            </section>

            <section id="webassembly">
                <h2>2. WebAssembly Performance</h2>
                <p>WebAssembly allows near-native performance in the browser...</p>
            </section>

            <section id="progressive-web-apps">
                <h2>3. Progressive Web Apps (PWAs)</h2>
                <p>PWAs continue to bridge the gap between web and mobile apps...</p>
            </section>

            <!-- Article Footer -->
            <footer class="article-footer">
                <div class="tags">
                    <h3>Tags:</h3>
                    <ul>
                        <li><a href="/tag/webdev">Web Development</a></li>
                        <li><a href="/tag/trends">Trends</a></li>
                        <li><a href="/tag/2024">2024</a></li>
                    </ul>
                </div>
                
                <div class="share">
                    <h3>Share this article:</h3>
                    <!-- Social sharing buttons -->
                </div>
            </footer>
        </article>

        <!-- Sidebar -->
        <aside class="sidebar">
            <section class="author-bio">
                <h2>About the Author</h2>
                <img src="sarah.jpg" alt="Sarah Chen">
                <p>Sarah is a senior web developer with 8 years of experience...</p>
            </section>
            
            <section class="related-posts">
                <h2>Related Articles</h2>
                <article>
                    <h3><a href="/css-grid-guide">Complete CSS Grid Guide</a></h3>
                    <p>Learn how to create modern layouts with CSS Grid.</p>
                </article>
                <article>
                    <h3><a href="/javascript-frameworks">JavaScript Frameworks Comparison</a></h3>
                    <p>React, Vue, or Angular? We compare the top frameworks.</p>
                </article>
            </section>
        </aside>
    </main>

    <!-- Site Footer -->
    <footer class="site-footer">
        <div class="footer-content">
            <section class="footer-links">
                <h2>Quick Links</h2>
                <nav aria-label="Footer Navigation">
                    <ul>
                        <li><a href="/privacy">Privacy Policy</a></li>
                        <li><a href="/terms">Terms of Service</a></li>
                        <li><a href="/sitemap">Sitemap</a></li>
                    </ul>
                </nav>
            </section>
            
            <section class="contact-info">
                <h2>Contact Us</h2>
                <address>
                    Email: <a href="mailto:contact@techinsights.com">contact@techinsights.com</a><br>
                    Phone: (555) 123-4567
                </address>
            </section>
            
            <section class="newsletter">
                <h2>Newsletter</h2>
                <p>Subscribe for weekly tech insights</p>
                <form>...</form>
            </section>
        </div>
        
        <div class="copyright">
            <p>&copy; 2024 Tech Insights. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

Example 2: E-commerce Product Page

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Premium Wireless Headphones | TechStore</title>
</head>
<body>
    <header>
        <nav aria-label="Main Navigation">
            <!-- Logo, search, cart, etc. -->
        </nav>
    </header>

    <main>
        <!-- Product Article -->
        <article class="product">
            <header>
                <h1>Premium Wireless Headphones</h1>
                <p class="sku">SKU: HP-2024-PRO</p>
            </header>

            <div class="product-content">
                <!-- Product Images Section -->
                <section class="product-images" aria-labelledby="images-heading">
                    <h2 id="images-heading" class="visually-hidden">Product Images</h2>
                    <!-- Image gallery -->
                </section>

                <!-- Product Details Section -->
                <section class="product-details" aria-labelledby="details-heading">
                    <h2 id="details-heading">Product Details</h2>
                    
                    <section class="specifications">
                        <h3>Specifications</h3>
                        <dl>
                            <dt>Battery Life</dt>
                            <dd>30 hours</dd>
                            <dt>Connectivity</dt>
                            <dd>Bluetooth 5.3</dd>
                        </dl>
                    </section>

                    <section class="features">
                        <h3>Key Features</h3>
                        <ul>
                            <li>Active Noise Cancellation</li>
                            <li>Voice Assistant Support</li>
                            <li>Water Resistance (IPX4)</li>
                        </ul>
                    </section>
                </section>

                <!-- Purchase Section -->
                <aside class="purchase-box">
                    <h2>Purchase Information</h2>
                    <div class="price">$199.99</div>
                    <form class="add-to-cart">...</form>
                    
                    <section class="shipping-info">
                        <h3>Shipping Info</h3>
                        <p>Free shipping on orders over $50</p>
                    </section>
                </aside>
            </div>

            <!-- Reviews Section -->
            <section class="reviews" aria-labelledby="reviews-heading">
                <h2 id="reviews-heading">Customer Reviews</h2>
                
                <article class="review">
                    <header>
                        <h3>Excellent sound quality!</h3>
                        <div class="rating">★★★★★</div>
                        <p>By Alex Johnson • <time datetime="2024-01-10">Jan 10, 2024</time></p>
                    </header>
                    <p>These headphones exceeded my expectations...</p>
                </article>
                
                <article class="review">
                    <!-- Another review -->
                </article>
            </section>
        </article>

        <!-- Related Products -->
        <aside class="related-products" aria-label="Related Products">
            <h2>You Might Also Like</h2>
            <div class="product-grid">
                <article class="product-card">...</article>
                <article class="product-card">...</article>
            </div>
        </aside>
    </main>

    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

Why Semantic HTML Matters

1. Accessibility

html

<!-- Semantic HTML helps screen readers -->
<nav aria-label="Main menu">  <!-- Screen reader: "Main menu navigation" -->
    <ul>
        <li><a href="/">Home</a></li>
    </ul>
</nav>

<main>  <!-- Screen reader: "Main content" -->
    <article>
        <h1>Page Title</h1>  <!-- Creates proper heading structure -->
    </article>
</main>

<!-- VS non-semantic -->
<div class="menu">  <!-- Screen reader: "Div" - no context! -->
    <div class="menu-item">Home</div>
</div>
<div class="content">
    <div class="title">Page Title</div>
</div>

2. SEO Benefits

html

<!-- Search engines understand content better -->
<article>
    <h1>Best Web Development Practices 2024</h1>
    <p>Content about web development...</p>
</article>

<!-- Search engines know this is the main article -->

<!-- VS -->
<div class="post">
    <div class="title">Best Web Development Practices 2024</div>
    <div class="content">Content about web development...</div>
</div>
<!-- Search engines have to guess what this content is -->

3. Maintainability

html

<!-- Semantic code is self-documenting -->
<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
    <aside>...</aside>
</main>
<footer>...</footer>

<!-- Easy to understand structure -->

<!-- VS -->
<div class="div1">
    <div class="div2">...</div>
</div>
<div class="div3">
    <div class="div4">...</div>
    <div class="div5">...</div>
</div>
<div class="div6">...</div>

<!-- What does this structure represent? -->

4. CSS Styling Benefits

html

<!-- Cleaner CSS selectors -->
header { ... }
nav ul { ... }
article h2 { ... }

<!-- VS -->
.div1 { ... }
.div2 .list { ... }
.div3 .title { ... }

5. Future Compatibility

html

<!-- New browsers and devices understand semantic elements -->
<article>
    <section>...</section>
</article>

<!-- Future technologies (VR, voice assistants, etc.) -->
<!-- can better interpret semantic structure -->

Common Semantic Patterns

1. Card Component

html

<!-- BAD: Generic divs -->
<div class="card">
    <div class="card-header">Title</div>
    <div class="card-body">Content</div>
</div>

<!-- GOOD: Semantic card -->
<article class="card">
    <header class="card-header">
        <h2>Card Title</h2>
    </header>
    <div class="card-body">
        <p>Card content goes here...</p>
    </div>
    <footer class="card-footer">
        <button>Action</button>
    </footer>
</article>

2. Form Layout

html

<!-- BAD -->
<div class="form-section">
    <div class="form-title">Contact Us</div>
    <div class="form-fields">...</div>
</div>

<!-- GOOD -->
<section aria-labelledby="contact-heading">
    <h2 id="contact-heading">Contact Us</h2>
    <form>...</form>
</section>

3. FAQ Section

html

<!-- BAD -->
<div class="faq">
    <div class="question">What is HTML?</div>
    <div class="answer">HTML stands for...</div>
</div>

<!-- GOOD -->
<section aria-labelledby="faq-heading">
    <h2 id="faq-heading">Frequently Asked Questions</h2>
    
    <article class="faq-item">
        <h3>What is HTML?</h3>
        <p>HTML stands for HyperText Markup Language...</p>
    </article>
</section>

Accessibility Features with Semantic HTML

ARIA Landmarks (Built-in with semantics):

html

<!-- These create automatic ARIA landmarks -->
<header role="banner"> <!-- Implicit: banner -->
<nav role="navigation"> <!-- Implicit: navigation -->
<main role="main"> <!-- Implicit: main -->
<aside role="complementary"> <!-- Implicit: complementary -->
<footer role="contentinfo"> <!-- Implicit: contentinfo -->

<!-- Manual ARIA for non-semantic elements -->
<div role="banner">...</div> <!-- Required when not using <header> -->
<div role="main">...</div>   <!-- Required when not using <main> -->

Skip Navigation:

html

<body>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    
    <header>...</header>
    
    <main id="main-content">
        <!-- Main content here -->
    </main>
</body>

<style>
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: #000;
        color: white;
        padding: 8px;
        z-index: 100;
    }
    
    .skip-link:focus {
        top: 0;
    }
</style>

Common Mistakes to Avoid

html

<!-- ❌ Using <section> as a generic wrapper -->
<section class="container">  <!-- WRONG: Just for styling -->
    <div>Content</div>
</section>

<!-- ✅ Use <div> for styling wrappers -->
<div class="container">  <!-- CORRECT -->
    <section>            <!-- Only if it's a thematic group -->
        <h2>Section Title</h2>
        <p>Content...</p>
    </section>
</div>

<!-- ❌ Using <article> for everything -->
<article class="sidebar-widget">  <!-- WRONG: Not self-contained -->
    <h3>Recent Posts</h3>
    <ul>...</ul>
</article>

<!-- ✅ Use <aside> or <section> -->
<aside class="sidebar-widget">  <!-- CORRECT: Related content -->
    <h3>Recent Posts</h3>
    <ul>...</ul>
</aside>

<!-- ❌ Missing headings in sections -->
<section>
    <p>Content without heading...</p>  <!-- WRONG: What's this section about? -->
</section>

<!-- ✅ Always include headings -->
<section>
    <h2>Section Title</h2>  <!-- CORRECT: Clear purpose -->
    <p>Content...</p>
</section>

<!-- ❌ Over-nesting -->
<article>
    <section>
        <article>  <!-- WRONG: Article inside section of article? -->
            <section>...</section>
        </article>
    </section>
</article>

<!-- ✅ Logical nesting -->
<article>
    <section>  <!-- Article contains sections -->
        <h2>Part 1</h2>
        <p>Content...</p>
    </section>
    <section>
        <h2>Part 2</h2>
        <p>Content...</p>
    </section>
</article>

Quick Decision Guide

When to use each element:

text

<header>   - Page/Article introduction (logo, title, nav)
<footer>   - Page/Article conclusion (copyright, links, author info)
<nav>      - Navigation menus (site nav, page nav, breadcrumbs)
<main>     - Primary content (ONCE per page)
<article>  - Self-contained content (blog post, news article, product)
<section>  - Thematic grouping (chapter, tab content, FAQ category)
<aside>    - Related content (sidebar, pull quote, advertisement)

Decision Flow:

  1. Is it navigation? → <nav>

  2. Is it self-contained content? → <article>

  3. Is it a thematic group within content? → <section>

  4. Is it related/supplementary content? → <aside>

  5. Is it introductory content? → <header>

  6. Is it concluding content? → <footer>

  7. Is it the primary content? → <main>

  8. None of the above? → <div> or <span>

Validation Exercise

html

<!-- Which is better? -->
<!-- Option A (Non-semantic) -->
<div id="page">
    <div class="top">
        <div class="menu">...</div>
    </div>
    <div class="middle">
        <div class="post">...</div>
        <div class="sidebar">...</div>
    </div>
    <div class="bottom">
        <div class="links">...</div>
    </div>
</div>

<!-- Option B (Semantic) -->
<body>
    <header>
        <nav>...</nav>
    </header>
    <main>
        <article>...</article>
        <aside>...</aside>
    </main>
    <footer>
        <nav>...</nav>
    </footer>
</body>

<!-- Answer: Option B is better for all reasons discussed! -->

Key Takeaways

  1. Semantic HTML describes meaning, not appearance

  2. Each semantic element has a specific purpose

  3. Accessibility improves dramatically with semantics

  4. SEO benefits from clear content structure

  5. Code becomes more maintainable and readable

  6. Always include proper headings in sections

  7. Use <div> only for styling/layout when no semantic element fits

Remember: If you can use a semantic element, you should use it! The web will be better for everyone.

Comments (0)

No comments yet. Be the first to comment!

LecturreAI Assistant

Hello! I'm LecturreAI

What would you like to learn today?