What’s in a name? Semantic tagging for HTML and CSS
As a coding newbie, the first language I learned was HTML. It was relatively easy for me to quickly grasp HTML fundamentals. And the instant gratification of seeing my first “hello, world” published to a webpage — even if it was just in plain, unstyled text — got me hooked.
<p>hello, world!</p>But writing good HTML isn’t always easy. Just as with other coding languages, there’s a big difference between code that merely “works” (i.e., doesn’t throw an error when the computer runs the file), and code that is clean and expressive.
HTML helps power everyone’s interactions with the web. So it’s crucial that we consider how our code, and the way that it renders, will be read not just by computers, but by human beings. This includes users with unique needs, such as those who are visually impaired and rely on screen reader technology to read webpages. It also includes other developers, who may want to edit or build upon our code.
Understand the difference between semantic and non-semantic tagging
HTML has two main types of element tags: non-semantic and semantic.
Common non-semantic tags include <div> and <span>.
I like to think of non-semantic tags as containers, or boxes, with no labels. With a non-semantic tag, we know there’s a box, but we have no idea what’s inside the box.
A semantic element, on the other hand, has a name that gives us some indication about its contents. It’s a box with a label!
In other words, semantic tags communicate meaning about the content they are wrapping.
There are dozens of semantic element tags. MDN Web Docs gives us a handy list of some of the most common:
Embrace semantics!
In general, you should use semantic tags when possible.
Say you are creating a webpage that displays an article, accompanied by a few images, and a couple of block quotes. You also want to include a nav bar at the top of the page, and a footer with some copyright information.
Your code would run just fine if you tagged all of the text content on your page, including your block quotes, nav bar, and footer, as <div>s. You could use id and class attributes in CSS to style the various <div>s so that aesthetically, the article text would look different from the block quotes, etc.
But developers are notoriously lazy. What if you or another developer wanted to add some new elements to your page? Editing your HTML would be much easier if you had used semantic tags like <article>, <blockquote>, <nav>, and <footer> to make it clear which types of content were included on your page.
Screen reader technology will also be much better prepared to navigate your webpage if you have used semantic tagging to distinguish between various element types.
Further, semantic tags give us built-in styling defaults for certain elements. Although we will likely be applying a custom CSS stylesheet to the HTML that we’ve written, it doesn’t hurt that an <h1> heading tag will default to rendering in a larger font size than an <h2> heading.
HTML offers six possible heading level tags that communicate important information about the structure and hierarchy of text in your webpage. <h1> headings should be used to indicate top-level headings, <h2> tags signal subheadings under <h1> headings, and so on.
<h1>Why I Love Pizza</h1><h2>My favorite cheeses</h2>
<p>Here is some text about why I love cheese in general.</p><h3>Mozzarella</h3>
<p>Here is some text about why I love mozzarella specifically.</p><h3>Goats' cheese</h3>
<p>Here is some text about why I love goats' cheese specifically.</p><h2>My favorite non-cheese toppings</h2>
<p>Here is some text about pizza toppings in general.</p><h3>Pineapple</h3>
<p>Here is some controversial text about loving pineapple on pizza.</p>
The above code will render like this:
The numbered heading levels in our HTML code— whether or not they are rendered with the default styling seen here — quickly orient the reader to the main subject of the page, “Why I Love Pizza,” and indicate the subtopics I’ve covered in the rest of the text.
This article merely scratches the surface when it comes to the benefits of semantic HTML tagging. What’s more, semantic tagging is just one of many ways to optimize code accessibility. In future posts, I hope to touch on related optimizations, like indicating the language of your webpage in your code, adding alt descriptions to images, and ensuring sufficient color contrast between text and images.
