Categories
Accessibility Code

The Importance of HTML

In 1917, the artist Michael Duchamp submitted his work, “Fountain,” to an art exhibition. It’s a used urinal. And it stirred up yet another conversation about, “What is art?”

I’ve only taken one art history class, so forgive my simplification here. Essentially, art is subjective. If you personally don’t like Duchamp’s urinal, it doesn’t make it any less art.

JavaScript and CSS are the focus of most web designer/developer’s learning, but they’re subjective to the end user. There are better and worse ways to write your CSS and JS, but none are 100% right or wrong (as long as your page still works, is secure, etc).

HTML has clearly right and wrong ways to write it, and this is too often ignored. Here are several examples I’ve seen in the wild:

  • A “button” that’s actually a clickable <div> and not a <button>.
  • A “title” that’s actually a<div> and not a heading element (<h1>, <h2>, etc).
  • A “label”” for an <input> that’s actually a <div>.
  • An “input” that’s actually a <div> with keydown listeners.

Notice a pattern? Looking at you, <div>. 👀

The essential issue is using a non-semantic element when a semantic element should have been used.

What Do We Mean by Semantic?

Semantic means that the element has a meaning. It says something about the content or its relationship to another thing. In HTML, basically anything that isn’t a <div> or <span> is semantic.

There’s also a continuum to what a tag tells us about the meaning of its content. For example, a <section> tells us less about its contents than an <article>.

<section> is still semantic, as it tells us that its contents should be considered as a group. But, an <article> tells its contents are grouped together and that it’s a cohesive article.

For more examples, I’ll walk through the Heading and Button elements to demonstrate how they are semantic.

Heading Elements

An <h1> is a title of a page, and an <h2> beneath it gives a hierarchy to the page.

<!-- h1, the most important part -->
<h1>The Importance of HTML</h1>
<!-- "What Do We Mean by Semantic?" is a subsection of "The Importance of HTML" -->
<h2>What Do We Mean by Semantic?</h2>
<!-- "Headings" is a subsection of "What Do We Mean by Semantic?" --> 
<h3>Headings</h3>

Using an appropriate heading structure, you can automatically create a table of contents. Here’s how this article could be built into a table of contents just based off of the heading levels:

  • <h1>: The Importance of HTML
    • <h2>: What Do We Mean by Semantic?
      • <h3>: Headings
      • <h3>: Buttons
    • <h2>: Non-Semantic Elements
    • <h2>: Correct HTML Does Not Bring You Glory, But You Need to Do It

You can see the structure of the whole article being communicated just via the HTML. If I had used all <div>s, then the structure would look like:

  • <div>: The Importance of HTML
  • <div>: What Do We Mean by Semantic?
  • <div>: Headings
  • <div>: Buttons
  • <div>: Non-Semantic Elements
  • <div>: Correct HTML Does Not Bring You Glory, But You Need to Do It

There’s no meaning attached to the <div>, so it would be a flat structure. Just by using the correct HTML we bring clarity and structure to the DOM.

Buttons

A button submits or changes the state of something. By definition, it’s always:

  • focusable
  • activated on space bar or enter key presses
  • activated on mouse click.

When you make a <div> with a click listener, you’re not using the semantic interactions that come for free when you use a <button>. You have to manually build out the:

  • focus state
  • keyboard interactions
  • mouse interactions

Not only that, but when a screen reader comes to a <button>Submit</button>, it will use those semantics and announce, “Submit, button.”

The same thing using a <div> would look like:

<!-- Just kidding, I'm not going to make an accessible div button. -->
<!-- Use a <button> please! 😂-->

When we use semantic HTML elements, we elevate the content’s meaning. It gives the content life.

Non-Semantic Elements

<div>s and <span>s are non-semantic elements. The <div> does not give the content any additional meaning. It’s just a <div>.

I’m not being totally fair, as there is a tiny bit of meaning behind a <div> vs a <span>:

  • A <div> is a block-level element, as in, it should wrap things together.
  • A <span> is an inline element. It should be used within another element, like <p><span class="dropcap">I</span>nline elements</p>.

If there are no HTML elements that make sense for the content, then use a <div> or <span>. There’s 100% a place for <div>s and <span>s. Not every piece of content or HTML element needs additional semantics.

When writing HTML, use as specific of an element as makes sense for your content. If there’s nothing specific enough, then keep going for less and less meaningful tags. <div> and <span> are always the last choice.

Correct HTML Does Not Bring You Glory, But You Need to Do It

You’re not going to get a Webby Award or thousands of views on Codepen for how amazingly crafted your HTML is. You’ll need to be OK going unrecognized for your work. But know that every time I use a screen reader or keyboard on a site and it works correctly, I have a little spark of joy. I’m sure I’m not alone here.

In the end, you’ll have to be OK with knowing you did your best to make your work accessible to everyone.

By Jerry Jones

JavaScript Engineer for Automattic, living simply in rural MO.

7 replies on “The Importance of HTML”

Great read, thanks!
I would also add that it is preferable that text, any text, if not already in a , , , etc. should be in a rather than a .

One tiny thing: in “…when a semantic element should be have used.” didn’t you mean instead “…when a semantic element should have been used.”?

Like

Nice catch on the grammar error! Updated 👍

Unfortunately, the HTML tags were stripped from your comment. Would you mind trying again without using real HTML so it doesn’t get removed?

Like

Oopsy! Sorry 🙂 I should have guessed.

Here it is again:
I would also add that it is preferable that text, any text, if not already in a “h(n)”, “li”, “label”, etc. should be in a “p” rather than a “div”.

Like

This is something that came up for me recently. “Should this content that’s not part of an article or flow be in a p or div?”

Would you mind explaining a bit more behind the idea? I’d love to know more!

Like

Sure. There’s not a strict consensus on this though but here’s my personal take on the matter.

Wrapping text in a “p” (paragraph) HTML element has a few advantages:
– it is semantic (unlike a “div”) which goes with what HTML is about* I’d say even if it’s not mandatory, it’s a good coding habit
– you get default styles in CSS (margins for legibility) that are particularly useful as soon as you add/contribute content before or after, and of course you can easily modify all plain text by targeting all “p”s
– screen reader users can choose to navigate between paragraphs; although when I test with NVDA, Ctrl + up/down arrows targets correctly both “p”s and “div”s but I don’t know if that works in all OS/browser/screen reader version combination.
Here’s a Codepen for test purposes: https://codepen.io/ArnzWeb/full/zYvPvbL

* Just like the “article” element is not meant exclusively for actual articles, I don’t believe the “p” element being exclusively for actual long paragraphs (as a group of sentences). A paragraph can be made of just a sentence, a sentence can be just a word.

Again, that’s my position but I’d love to read other arguments challenging that.

Liked by 1 person

I’m afraid I won’t challenge your position 🙂

I think it makes sense to use paragraph elements for pretty much any text. I just finished working on a Podcast Player WordPress block, and I had originally marked up a podcast description as a div, as I initially didn’t feel like it had appropriate context for a paragraph. I was wrong though, and changing it to a paragraph had many of the benefits you mention 🙂

Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s