Skip to content Skip to footer

Semantic Code. Why meaning is important.

A broken-down car illustration. Your website could be in the same poor state without semantic code.
Article Content
  • How semantic code acts as a signpost to users, particularly those using screen readers, allowing them to ascribe meaning logic to code.
  • How for those navigating a website who cannot rely on visual cues, its important that we have code with semantic meaning, such as navigation being called ‘Nav’ rather than ‘Div’.
  • The history of using non-semantic elements such as tables, this was inefficient and no longer needed due to the development of semantic HTML elements.
  • HTML semantic elements explained such as ‘nav’, ‘footer’, ‘aside’ and ‘main’.
  • Why semantic code makes website more functional and accessible.

It’s nice when things are what they say they are. No one likes being deceived. This is especially the case for technologies such as screen-readers, which need to navigate a website using the code of the website as signposts. These signposts need to be clear and logical and semantic code ensures this. It is, therefore, a key component of an accessible website.  

Semantic Code adds structure

It’s convenient to see a website as a set of visual cues for the user, where the structure of the code underneath is unimportant. If the navigation visually looks like navigation, what does it matter if it’s in a div? (Div is short for division because its purpose is to divide content. It functions as an empty container for content). The same with a footer or any other aspect of the website. Most users will never look at the code, so as long as it visually looks how you would expect, does it matter?

For years, the approach of relying on visual cues, whilst the code implied no real meaning or structure, was widespread.  This is because the technical limitations of HMTL did not match the ambition of web designers and developers. This resulted in developers using whatever code was available to produce the desired visual result.

A history of HTML bad practice

This resulted in table HTML elements being used for content that wasn’t a table. Recently divs and spans have been used as containers for just about everything (spans like Divs are empty containers with no semantic meaning attached). The car looked good on the outside, but under the hood, the engine was stuck together with gaffer tape.

This approach was bad practice. After all, nobody wants a car that looks good but that could fall apart at any moment.  It was also not accessible because it took for granted the fact that all users could rely on visual cues to navigate a website’s content.

Users with visual impairments and other disabilities rely on screen reader technology to navigate and read out the content of a website. The use of screen readers makes how code is used and structured very important.

 If a website uses divs or spans repeatedly, even with appropriate classes, the website structure becomes a jumbled mess for those using screen readers. It makes it difficult to distinguish the different elements of a website. For example, if div’s are used, the screen reader can’t tell which part is navigation, which is the footer, because these elements have no implied meaning. Whilst they may look different visually, they all look the same to a screen reader.

The overuse of elements that are not semantic makes it difficult for users of these technologies to understand the layout and structure of a website.  Navigation of the website could therefore be a frustrating experience.

Useful Tip

Don’t think about divs as completely useless. The key thing to remember is div’s have no semantic meaning. Div is short for division, reflecting how they are used to help divide content visually when it is not relevant to have a semantic element such as a section.  For example, they are useful if you need a wrapper around a piece of content. MDN web docs has useful information on when using a div is appropriate. (read the MDN web docs article here).

HTML Semantic Elements

Thankfully, semantic HTML elements are here to the rescue. These elements, which have developed over time, are called Semantic because their names have meaning. They are what it says on the tin, or in this case, the HTML tag. The car engine no longer has to be fixed together with gaffer tape.

Illustration of sparkling new car. Semantic HTML has your code running like a new engine.

So instead of relying on visual cues to indicate that navigation is navigation, we have an element called ‘<nav>’. Similarly, we have a ‘<footer>’ element for footers. An ‘<article>’ element for specific segments of written content or ‘<aside>’ for extra information content supplementary to the site’s core content.  We now even have a ‘<main>’ element which allows the developer to define the core content of a website, to screen readers and other technologies.

The positive impact of semantic code

The specific labelling that semantic code provides means that screen readers can navigate websites efficiently using HTML elements as signposts. It helps the screen reader establish the context of all of the content within the website and communicate this to the user. It allows the user, using this technology to navigate the website with the ease and efficiency of someone who can rely on visual cues. Your website will be more efficient and accessible with its inclusion.

Semantic code should be an essential ingredient in the development of every website. Like with all accessibility, don’t make it an afterthought, see it as a blueprint for your site structure that you can refine over time.

The time for cobbling together code elements is over; long live semantic code!

Leave a Reply

Your email address will not be published. Required fields are marked *