There's an ongoing meme on Twitter about developers littering HTML markup with
<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.
Let's improve the markup for a blog card component.
I am removing all the HTML attributes so we can focus on the HTML elements.
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
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
Finally, we'll put the title of the blog in a
<header> and put the blog's meta
data inside of a
Here's the final result.
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.
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
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
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?
Thanks for reading! 👋