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>© 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>© 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:
-
Is it navigation? →
<nav> -
Is it self-contained content? →
<article> -
Is it a thematic group within content? →
<section> -
Is it related/supplementary content? →
<aside> -
Is it introductory content? →
<header> -
Is it concluding content? →
<footer> -
Is it the primary content? →
<main> -
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
-
Semantic HTML describes meaning, not appearance
-
Each semantic element has a specific purpose
-
Accessibility improves dramatically with semantics
-
SEO benefits from clear content structure
-
Code becomes more maintainable and readable
-
Always include proper headings in sections
-
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!