Improve Accessibility with Semantic HTML

Context

It is easy to reach for <div> and <span> everywhere because they are flexible. The problem is that flexible markup is not always descriptive markup.

Semantic HTML gives structure meaning. That matters for:

• Accessibility: assistive technologies can understand the page structure more clearly.
• SEO: search engines get more context about the content hierarchy.
• Maintainability: future readers can scan the markup without guessing what each section represents.

The rule is not "never use <div>". The rule is "use the most descriptive element that fits the job".

Example

Let's improve a simple blog card. For clarity, the examples below omit most attributes and focus on the element choice itself.

<div>
  <a>
    <div>
      <img />
    </div>
    <div>
      <div>
        <h2>Semantic HTML</h2>
      </div>
      <p>This is a description of the blog.</p>
      <div>
        <time>September 11, 2020</time>
        <span>&middot;</span>
        <span>3 min read</span>
      </div>
    </div>
  </a>
</div>

That works, but it does not say much about the content.

Because the card represents a standalone piece of content, the outer wrapper can be an <article>.

<article>
  <a>
    <div>
      <img />
    </div>
    <div>
      <div>
        <h2>Semantic HTML</h2>
      </div>
      <p>This is a description of the blog.</p>
      <div>
        <time>September 11, 2020</time>
        <span>&middot;</span>
        <span>3 min read</span>
      </div>
    </div>
  </a>
</article>

Next, separate the visual and textual parts of the card. A <figure> is a good fit for the image, and a <section> can hold the supporting copy.

<article>
  <a>
    <figure>
      <img />
    </figure>

    <section>
      <div>
        <h2>Semantic HTML</h2>
      </div>
      <p>This is a description of the blog.</p>
      <div>
        <time>September 11, 2020</time>
        <span>&middot;</span>
        <span>3 min read</span>
      </div>
    </section>
  </a>
</article>

Finally, use a <header> for the title and a <footer> for metadata. That makes the card easier to parse at a glance.

<article>
  <a>
    <figure>
      <img />
    </figure>

    <section>
      <header>
        <h2>Semantic HTML</h2>
      </header>
      <p>This is a description of the blog.</p>
      <footer>
        <time>September 11, 2020</time>
        <span>&middot;</span>
        <span>3 min read</span>
      </footer>
    </section>
  </a>
</article>

The takeaway

Semantic elements are not about being clever. They are about making the document describe itself.

If a more specific element exists and it matches the content, use it. If a <div> is the clearest choice, use that instead. The goal is descriptive markup, not performative semantics.

Thanks for reading! 👋