Improve Accessibility with Semantic HTML

Context

There's an ongoing meme on Twitter about developers littering HTML markup with <div> elements.

https://twitter.com/EmmaBostian/status/1304155468063965185

Using <div> is an easy way to structure elements on a webpage.

However, by marking up our pages with <div> elements, we aren't describing the structure of the page.

We aren't saying what's what.

To combat this, consider using semantic HTML. In doing so, we can improve

• Accessibility. We make it easier for visually-impaired users because screen readers can better understand the structure of our content.
• SEO. Semantic HTML provides web crawlers context for how our pages are structured. This context could lead to rich snippets in search engine result pages.
• Developer experience. It's certainly easier (for me, at least) to parse markup when it is descriptive.

https://twitter.com/codeability/status/1204542650667286529?s=20

Example

Let's improve the markup for a blog card component.

Note

I am removing all the HTML attributes so we can focus on the HTML elements.

<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>

This isn't terrible, but we could swap some of these <div> elements with something more semantic.

Since the blog card describes a self-contained piece of content, we will swap the parent <div> with <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, let's go ahead and section out the content from the image.

We'll put the copy in its own <section> and describe the image as a <figure>.

<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, we'll put the title of the blog in a <header> and put the blog's meta data inside of a <footer>.

<article>
  <a>
    <section>
      <img />
    </section>
    <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>

Here's the final result.

<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>

Are these the best HTML tags that could've been used to mark up this blog card?

Maybe not! But that's not the point.

The point is we should do our best to give semantic meaning to our sites.

https://twitter.com/lonekorean/status/1301931741037371394?s=20

Getting Started

If you're just starting out, you'll quickly realize there are many HTML elements.

Don't worry about trying to memorize all of them. Whenever I'm unsure of which semantic tags to use, I'll look up the best way to semantically define that component.

For example, once I was building a custom alert component. I wasn't sure the best way how to describe the component using semantic HTML. I searched "alert component semantic HTML" and learned about the <dialog> element—used for interactive components.

Keep in mind, just because there are semantic HTML elements, doesn't mean we should never use <div> elements. Sometimes, <div> is the best choice when we need the HTML structure to apply certain CSS rules but don't need to add any semantic meaning.

Nonetheless, whenever we write markup, we should ask ourself:

Could I use a semantic HTML tag here such that the resulting markup is more descriptive?

https://twitter.com/housecor/status/1243625787426844672

Thanks for reading! 👋