Tutorials References Exercises Menu
Paid Courses

Accessibility Semantic Elements

Semantic elements = elements with a meaning.

Provide the user a good way to navigate and interact with your site. Make your HTML semantic. Semantics is about using the correct element in HTML. There are approximately 110 elements in HTML 5.

Two of them have no meaning – <div> and <span>. They tell us nothing about the content. They have no built in accessibility features, so we should always check to see if any other elements are better suited. Example of semantic elements: <form>, <table> and <article>. They clearly define the content.

Easy example from Uber

Screenshot from Uber with a heading, a paragraph, a button, a link and an image.

In this example from Uber, we have five elements:

  • A heading
  • A paragraph
  • A button
  • A link
  • An image

These elements can be translated into HTML:

  • <h2>
  • <p>
  • <button>
  • <a>
  • <img>

Is this correct? Even though Sign up to drive looks like a button, Uber has used a <a> instead of a <button>. This is the code, a bit simplified:

<h2>Get in the driver's seat and get paid</h2>
<p>Drive on the platform with the largest network of active riders.</p>
<a href="/signup/drive/>Sign up to drive</a>
<a href="/en/drive/">Learn more about driving and delivering</a>
<img src="driver.jpg" alt="">

This is semantically correct. The button is coded as a link, because it behaves like a link. It takes the user to another view. It does not matter that the link is styled as a button, it is still a link.

The <button> element should be used for any interaction that performs an action on the current page. The <a> element should be used for any interaction that navigates to another view.

Angular Material, Button

Now that you have learned the basics of semantics, let us check which semantic elements we have in our HTML toolbox. Next up, landmarks.