Semantics

What is Semantic HTML?

Semantic HTML uses elements that clearly describe the meaning of the content they contain. Unlike generic tags like <div> and <span>, semantic tags such as <header>, <footer>, and <article> provide context, making content easier to understand and more accessible.

Commonly Used Semantic Tags

Here are some widely used semantic tags in HTML:

• <header> – Represents introductory content.
• <footer> – Contains footer-related information.
• <article> – Represents self-contained content.
• <section> – Defines a distinct section of content.
• <aside> – Contains supplementary content.
• <nav> – Represents navigation links.

Examples

Using the <header> and <footer> Tags

<header>  
  <h1>My Website</h1>  
  <nav>  
    <ul>  
      <li><a href="#">Home</a></li>  
      <li><a href="#">About</a></li>  
      <li><a href="#">Services</a></li>  
      <li><a href="#">Contact</a></li>  
    </ul>  
  </nav>  
</header>  
<footer>  
  <p>&copy; 2025</p>  
</footer>

Using the <article> and <section> Tags

<article>  
  <h2>Article Title</h2>  
  <section>  
    <p>Article content goes here.</p>  
  </section>  
</article>

Using the <aside> and <nav> Tags

<aside>  
  <p>This is an aside section.</p>  
</aside>  
<nav>  
  <ul>  
    <li><a href="#">Home</a></li>  
    <li><a href="#">About</a></li>  
  </ul>  
</nav>

Using the <figure> and <figcaption> Tags

<figure>  
  <img src="image.jpg" alt="Example image" />  
  <figcaption>This is an example image.</figcaption>  
</figure>

Importance of Semantic HTML

• Accessibility – Enhances usability for screen readers and assistive technologies.
• Search Engine Optimization (SEO) – Helps search engines better understand content structure, improving rankings.
• Readability and Maintainability – Makes code cleaner and easier to manage.

Conclusion

Semantic HTML involves using elements that clearly describe the meaning of the content they contain, improving both accessibility and the structure of web pages. Tags like <header>, <footer>, <article>, and <nav> provide meaningful context, making content more understandable for both users and search engines.