✅ Semantic Elements
- Definition: Elements that clearly describe their meaning both to the browser and the developer.
- Purpose: Improve readability, accessibility, and SEO.
🔸 Examples:
<header>– represents the top section or intro.<nav>– for navigation links.<main>– the main content area.<article>– a self-contained piece of content.<section>– a standalone section.<footer>– bottom area of the page.
💡 Example:
<header>
<h1>Welcome to My Site</h1>
</header>
<main>
<article>
<h2>Blog Post</h2>
<p>This is a blog post.</p>
</article>
</main>
❌ Non-Semantic Elements
- Definition: Elements that do not describe their content/role.
- Common Use: For styling or layout, but don’t convey meaning.
🔸 Examples:
<div>– generic block.<span>– generic inline container.
💡 Example:
<div class="header">
<h1>Welcome</h1>
</div>
<div class="content">
<p>This is a blog post.</p>
</div>
🟢 Why Use Semantic Elements?
- Better SEO (search engines understand your content)
- Enhanced accessibility (screen readers interpret layout properly)
- Maintainable code (clear structure and roles)
