Semantic HTML refers to using HTML tags according to their meaning in the context of the web page. Instead of relying on <div> and <span> tags for everything, you use tags like <header>, <footer>, <article>, and <section>, which provide meaning to the content.

Benefits of Semantic HTML

• Improved Accessibility: Screen readers and other assistive technologies can better understand the structure and content of your web page, making it more accessible for users with disabilities.
• Better SEO: Search engines can better index and understand the content on your page, helping you rank higher in search results.
• Easier Maintenance: When you use meaningful tags, your code is easier to read and maintain. It's clearer to other developers what each part of the page represents.

Example of Semantic HTML

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>This is an example of a semantic HTML article.</p>
  </article>
</main>

<footer>
  <p>© 2024 My Website</p>
</footer>

In this example, we’ve used the <header>, <main>, <article>, and <footer> tags to give structure and meaning to the page content.

When to Use Semantic HTML

Whenever you're building web pages, you should opt for semantic tags over generic <div> and <span>. Not only will it make your code more readable, but it will also improve user experience and accessibility.

Incorporating semantic HTML is a simple practice that makes your web pages more effective, both for search engines and users.

For more details, check out MDN's Semantic HTML Guide.