Semantic HTML

 

What is it?

HTML elements can be divided into two categories:

  • Non-semantic: these elements don’t specify anything about their content, and are simply used to group other elements, or separate certain elements from each other. The main examples are <div> and <span>.
  • Semantic: these elements convey information about their content. Some are as old as HTML itself (for example, the <p> element for paragraphs, and the <a> element for links). Every subsequent version of HTML has added new semantic elements; in particular, HTML5 introduced many semantic elements that are necessary for improved accessibility (such as <nav> for navigation elements and <time> for human-readable times and dates).

How and why to use them

It’s important to use semantic elements properly, so that screen readers and other assistive technologies can understand their meaning and communicate it to the user. For example:

  • If you (correctly) use <h2> elements at the beginning of sections about fruits and vegetables, a screen reader can announce them as “Heading level 2, Fruits”, and then later “Heading level 2, Vegetables”. Additionally, most screen readers allow the user to browse by headings, so they can understand the structure of the page or skip ahead to the sections they’re interested in.
  • If you (incorrectly) use <p> elements for these headings, and then add CSS styling to make them appear bigger and bolder, users who can’t see what they look like won’t be able to know that they serve a special purpose. Additionally, users won’t be able to browse the page by headings.

In addition to certain meanings, semantic elements that are interactive also have built-in functionality that’s very important for accessibility.

Let’s take a button as an example. You should use the HTML <button> element. You could technically use a different element, such as a <div>,  and then style it using CSS. However, in order to make it behave like a true button, you’d have to do the following:

  • Add the button ARIA role with role="button", so that screen readers can announce it as such (more about ARIA roles on our ARIA page).
  • Make it focusable with tabindex="0" so that it can be accessed with a keyboard or keyboard-emulating technology.
  • Add keyup event handling, for at least the Space key, so that it can be activated with a keyboard or keyboard-emulating technology.
  • Add click event handling, so that it can be activated with a mouse or mouse-emulating technology.

All of that just to achieve the functionality you get out of the box with a <button> element. Why make things harder than they need to be?

Resources