Semantic HTML means choosing tags that describe the content they contain—like <header>, <nav>, <article>, <section>, and <footer>—instead of generic tags like <div> and <span>. This practice helps browsers, search engines, and assistive technologies understand the structure and context of the content. Proper use of semantic elements enhances accessibility, SEO, and maintainability.
Using semantic HTML makes web designs more accessible to screen readers and other assistive technologies by clearly defining the roles and sections of a page.
It also improves search engine optimization, as search engines use this structure to better index and rank content.
Example
Instead of wrapping a blog post in generic <div> elements, using semantic tags like this:
<article>
<header>
<h1>Understanding Semantic HTML</h1>
</header>
<section>
<p>Semantic HTML helps improve accessibility and SEO...</p>
</section>
<footer>
<p>Published on May 27, 2025</p>
</footer>
</article>This structure clearly communicates the purpose of each part of the content to browsers and assistive technologies.