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.

a drawing of a box labeled with question marks

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.

a drawing of a box labeled with a picture of a light bulb and the words “light bulbs”

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.

Additional resources