HTML Semantic Tags
Semantic tags in HTML easily describe their meaning in a mortal- and machine-readable
way. Unlike
non-semantic tags (like <div> or <span>),
semantic tags tell the
browser and developer what kind of content they contain.
These tags make your HTML more readable, modification SEO (Search Machine Optimization), and insure better availability for screen reader.
Why Semantic tags?
- Improves tag clarity and structure
- Better SEO ranking
- Enhances availability (for screen reader)
- Standard-faithful and future-evidence
Common Semantic Tags
<header> – Defines the title of a
section or web page<nav> – Defines a navigation section
(like menus)<main> – Defines the main content of the
web page<section> – Defines a section in the
document<article> – Defines an independent
non-contained content<aside> – Defines content away from the
main content (like sidebars)<footer> – Defines the footer of a
section or web page<figure> – Wraps images and their
captions<figcaption> – Defines the caption for a
figure<mark> – Highlights or marks text
Example
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<main>
<article>
<h2>Drink to My Blog</h2>
<p>This is a semantic illustration of an composition.</p>
</article>
<aside>
<h3>Subscribe to our newsletter!</h3>
<form>
<input type="email" placeholder="Your email">
<button type="submit">Subscribe</button>
</form>
</aside>
</main>
<footer>
<p>© 2025 All Rights Reserved</p>
</footer>
Preview :
Style Practices
- Use
<section> for grouping related content
- Use
<article> for blog posts or independent write-ups
- Always include a
<h1> inside <header>
for main
content
- Do not misuse semantic tags; keep their meaning clear
<header>– Defines the title of a section or web page<nav>– Defines a navigation section (like menus)<main>– Defines the main content of the web page<section>– Defines a section in the document<article>– Defines an independent non-contained content<aside>– Defines content away from the main content (like sidebars)<footer>– Defines the footer of a section or web page<figure>– Wraps images and their captions<figcaption>– Defines the caption for a figure<mark>– Highlights or marks text
Example
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<main>
<article>
<h2>Drink to My Blog</h2>
<p>This is a semantic illustration of an composition.</p>
</article>
<aside>
<h3>Subscribe to our newsletter!</h3>
<form>
<input type="email" placeholder="Your email">
<button type="submit">Subscribe</button>
</form>
</aside>
</main>
<footer>
<p>© 2025 All Rights Reserved</p>
</footer>
Preview :
Style Practices
- Use
<section>for grouping related content - Use
<article>for blog posts or independent write-ups - Always include a
<h1>inside<header>for main content - Do not misuse semantic tags; keep their meaning clear
“ Let your structure speak — semantic tags are the soul of meaningful HTML. ”