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.
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
- A “title” that’s actually a
<div>and not a heading element (
- A “label” for an
<input>that’s actually a
- An “input” that’s actually a
<div>with keydown listeners.
Notice a pattern? Looking at you,
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
<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
<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.
<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?
<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>: 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.
A button submits or changes the state of something. By definition, it’s always:
- 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.
<span>s are non-semantic elements. The
<div> does not give the content any additional meaning. It’s just a
I’m not being totally fair, as there is a tiny bit of meaning behind a
<div> vs a
<div>is a block-level element, as in, it should wrap things together.
<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
<span>. There’s 100% a place for
<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.
<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.
10 responses to “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.”?
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?
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”.
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!
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.
LikeLiked 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 🙂
[…] The Importance of HTML Headings Section I go over in more detail why Headings are important for […]
You might not win awards or fame for writing great HTML, but accessibility auditors like me will notice and think “well *there’s* an artisan!” 🙂 It’s the mark of a developer who cares about their craft and their users.
LikeLiked by 2 people
Hello, fellow A18n! Found your blog via this recent post by Chris Ferdinandi post and loved this post (I’m expecting soon to be talking to my team about basically exactly this stuff, so it came at a convenient time!). Just wanted to say hi, and thanks!
LikeLiked by 1 person
Awesome! 🙌 Let me know if there’s any way I can help! See you around on Slack, and hopefully someday in person at a GM!
LikeLiked by 1 person