Why You Should Use Semantic HTML (1 Minute Guide)

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.