Semantic Tags in HTML

Semantic tags clearly define the meaning of the content in HTML documents. They help search engines, screen readers, and developers understand the structure and content of a webpage.

What Are Semantic Tags?

Semantic tags provide meaning to the web page content. Instead of using generic <div> or <span>, you can use tags like <header>, <footer>, <article>, and <section>.

Common Semantic Tags

<header> – Defines the header for a page or section.
<nav> – Defines navigation links.
<main> – Specifies the main content.
<section> – Defines a section in a document.
<article> – Defines independent content.
<aside> – Defines content aside from the main content.
<footer> – Defines the footer for a page or section.

Example Usage


<article>
    <header>
        <h2>News Title</h2>
    </header>
    <p>This is the news content.</p>
    <footer>Written by Admin</footer>
</article>

Why Use Semantic Tags?

Improves accessibility for screen readers.
Enhances SEO by providing meaningful structure.
Makes code easier to read and maintain.

Conclusion

Semantic tags make your HTML more meaningful, accessible, and SEO-friendly. Always prefer semantic tags over generic ones for better web development practices.

← Previous: Superscript & Subscript Next: Quote & Citation →