Semantic HTML

🧠 Semantic HTML – Make Your Markup Meaningful

Semantic HTML means using HTML tags that convey meaning about the content they contain, making your site more accessible, SEO-friendly, and easier to maintain.

🔍 Instead of using just <div> and <span>, semantic tags like <header>, <article>, and <nav> tell the browser and developers what the content is, not just what it looks like.

🚀 Why Use Semantic HTML?

Benefit	Description
♿ Accessibility	Helps screen readers understand page structure
📈 SEO	Search engines understand content better
🧱 Maintainability	Easier to read and work with
📦 Standardization	Follows modern HTML5 best practices

🔹 Common Semantic HTML Elements

Tag	Purpose
`<header>`	Intro or navigation for a section/page
`<nav>`	Primary site or page navigation
`<main>`	Main content area (unique per page)
`<section>`	Thematic grouping of content
`<article>`	Independent, self-contained content (e.g., blog post)
`<aside>`	Side content like ads, sidebars, tips
`<footer>`	Bottom info: copyright, links
`<figure>` / `<figcaption>`	For images, charts, etc., with captions
`<mark>`	Highlights or marks important text
`<time>`	Represents a date or time
`<summary>` / `<details>`	Expandable/collapsible content

🧱 Example: Semantic Page Structure

✅ Clear, accessible structure
✅ Great for screen readers and search engines

❌ Non-Semantic vs ✅ Semantic

❌ Non-Semantic	✅ Semantic
`<div id="nav">`	`<nav>`
`<div class="header">`	`<header>`
`<div class="footer">`	`<footer>`
`<div class="article">`	`<article>`

🔍 Tips for Using Semantic HTML

Use one <main> per page
Use <section> only when it adds meaning
Use <article> for reusable, independent content (like blog posts)
Nest semantics logically (e.g., <header> inside <article> is valid)
Combine with ARIA roles for advanced accessibility if needed

✅ Summary

Feature	Benefit
Semantic tags	Add meaning to structure
Helps SEO & accessibility	✅
Easier code maintenance	✅
Modern HTML5 standard	✅

1. Semantic HTML Cheat Sheet

📄 Page Structure Elements

📚 Content Tags

📐 2. Semantic Layout Template

html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Semantic HTML Example</title> </head> <body>

<header>
<h1>My Semantic Site</h1>
<nav>
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Articles</a></li>
<li><a href=“#”>Contact</a></li>
</ul>
</nav>
</header>