Improve Accessibility with Semantic HTML

Context

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

<div>
<div>
<div>
hTmL iS sO eAsY
</div>
</div>
</div>

— Emma Bostian 🐞 (@EmmaBostian) September 10, 2020

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.

If you think divs are cool, get a load of some other HTML elements out there:

- links, for navigating the web!
- buttons, for same-page actions!
- headings, for breaking up content!

Semantic HTML: It’s free, it’s fun, and it’s easy!

— EJ Mason (@codeability) December 10, 2019

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.

when you're the only one trying to use semantic HTML pic.twitter.com/XcxD0qHRFv

— Will Boyd (@lonekorean) September 4, 2020

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?

When I'm unsure what HTML element to use, I Google for "HTML5 Flowchart".

Super handy. 🔥

Why is semantic HTML important?
- Better SEO
- Easier maintenance
- Improved accessibility (Provides screenreader "landmarks")👍#a11y pic.twitter.com/fIk9KqnrMy

— Cory House (@housecor) March 27, 2020

Let me know your tips and tricks for implementing semantic HTML markup on Twitter.

Thanks for reading! 👋