Semantic HTML refers to using HTML tags that convey the structural meaning of content to both browsers and human developers, rather than using generic non-semantic tags like <div> and <span>.
Semantic tags clearly describe their purpose to assistive technologies and search engine crawlers:
<!-- Non-semantic approach (Avoid generic wrappers for everything) -->
<div class="header">Page Title</div>
<div class="article-body">Paragraph text</div>
<!-- Semantic HTML5 approach (Recommended) -->
<header><h1>Page Title</h1></header>
<article><p>Paragraph text</p></article>
Key comparison benefits:
<article>, <h1>, <mark>) to determine core topic relevance.flowchart TD
A["Semantic HTML5 Structure"] --> B["Landmarks: header, nav, main, footer"]
A --> C["Content Units: article, section, aside, figure"]
A --> D["Text Semantics: mark, time, cite, code, strong"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<article style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 600px;">
<header>
<h2>Understanding Semantic Markup</h2>
<p>Published on <time datetime="2026-08-13">August 13, 2026</time> by <cite>KoderSolution</cite></p>
</header>
<p>Semantic tags make web pages accessible and search-engine friendly. Use <mark style="background-color: #f59e0b; color: #000;">semantic tags</mark> over generic divs!</p>
</article>
</body>
</html>
<time datetime="YYYY-MM-DD"> for dates: Provides machine-readable date metadata for search engines and calendar integrations.<figure> and <figcaption> for images with captions: Groups images and visual diagrams directly with their textual explanation labels.<b> or <i> when <strong> or <em> is meant: Use <strong> for structural importance and <em> for emphasized stress tone.Create a semantic <article> element containing a <header>, a <time> element with a datetime attribute, a paragraph, and a <footer>!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.