DEV Community

Itamar Tati
Itamar Tati

Posted on

2

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>
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs