Semantic HTML: a quick primer
In this post, we’ll talk about the basics of semantic HTML elements and why they’re important to think about when you’re building a web page.
Non-semantic HTML elements
Non-semantic HTML tags don’t tell us anything about what they contain. Looking at a non-semantic HTML element won’t tell you anything about what type of content is inside of it.
The most common non-semantic elements are <div> and <span>.
While these tags are extremely useful for arranging and organizing the layout of a page, they are only intended to be used as containers for other elements;
they don’t inherently mean anything.
Semantic HTML elements
Semantic HTML tags tell us clearly what they contain. You can look at a semantic HTML element and know what type of content is inside of it.
Most HTML elements have semantic meaning. A <form> element contains a form you can fill out. An <a> element contains a hyperlink.
A <nav> element contains page navigation links.
There are also some very specific ones that can be quite useful depending on what you’re trying to put on your page! Here are a few examples:
<dfn>: indicates a term being defined, such as in a dictionary<kbd>: indicates text entry input, such as a keyboard shortcut<abbr>: indicates an abbreviation or acronym
Why is semantic HTML important?
Accessibility
Using semantic HTML correctly and relevantly makes a web page easier to navigate and understand, especially for users who are accessing the page with the help of a screenreader or other assistive technology. It’s very important to consider these users if you want the information on your page to be navigable and understandable.
Search engine optimization
Most search engines use the semantic meaning of your HTML to parse and categorize the content, and thus accessibility criteria are often factored into their ranking algorithms.
Semantic meaning and styling are different things
One of the easiest ways to use semantic HTML incorrectly (aside from not including it as-needed) is to use semantic elements in the wrong context when trying to make
something on the page look a certain way. If you just want something to look a certain way, and it doesn’t need to have any meaning attached to the way it looks, you can
use CSS to style it how you want.
As of HTML5, there is a specific separation between styling and semantics. For example, if you want to indicate something like the title of a book, you would use
<i>, whereas you would use <em> to indicate emphasis on some particular text.
Likewise, if you want text to be bigger, don’t use a header tag (<h1>, <h2>, etc.) unless that text is actually the heading of a section.
Testing
There are lots of tools that can be used to scan HTML to check some of the semantic usage. The W3C Markup Validation Service can run a basic scan on web pages. Lighthouse can analyze a page in the Chrome web browser for some aspects of semantic accessibility. Not everything can be tested automatically, though, so manually checking how your pages look (both by reading the HTML and by using a screen reader) can also be very helpful.
Going further
Learning the semantic context of all the HTML elements takes time, but it’s an important part of developing websites and web apps. I’ve included a few reference links in the next section that you can read through to learn more about when, where, and how to use semantic HTML.