Semantic HTML

It’s not an exaggeration to say that coding with Semantic HTML is probably the single most effective thing we can do to increase the accessibility of our website or application. The HTML we write makes up the DOM, which then feeds into the accessibility tree. There is a direct line between the Semantic HTML that we write and the ability of accessible technologies to interpret our content to users. Therefore, it’s absolutely essential that we master coding using semantic HTML techniques. A website or application that doesn’t have a strong semantic structure simply cannot be fully accessible.

What is Semantic HTML?

The word “semantics” itself refers to the study of meanings. Building on that, Semantic HTML is using HTML in a way that infers the meaning of each item, so that other developers and external technologies can quickly and easily discern what’s happening on the page. Because HTML has specific elements that are tailored for specific uses, we’re at an advantage. We can just use the preexisting tags that describe the element we’re creating.

Advantages of writing semantic HTML

As with so many things in accessibility, this is a practice that will benefit us in many different ways, not all of which are strictly accessibility-related. This is especially true of Semantic HTML. At its heart, Semantic HTML is really just a best practice. Writing Semantic HTML is just writing correct and technically accurate HTML, so of course, the positive side-effects will stretch beyond the realm of accessibility alone.

Easy-to-read code

The primary benefit of using semantic elements is that it makes our code incredibly easy to read and understand. Because each item is using a common and standardized name, it’s essentially self-documenting!