Quick Semantic Wins

Trying to make the jump from not really caring about semantics in your website to doing it 100% correctly can seem like a massive and daunting undertaking.

It doesn’t have to be, with baby steps you can slowly get a feel for certain things that you can learn off which will get you on the way to using semantic elements and attributes correctly.

This is by no means a comprehensive list of things but like I say, just some good starting points. We have an entire article about free tools which will pick up on some of these issues.

Some HTML elements and attributes to be aware of

HTML5 (now just called HTML) has been the standard for some time now and has pretty much full support amongst the browsers, there are a host of great new elements that really help to define content better than a plain old <div> can.

Here are four common things that will be on your website at any given time that often are not semantically marked up.

• Your navigation areas should be a <nav>, this isn’t just limited to the menu at the top of your screen but could be in your footer or even a paragraph of text whose soul purpose is to aid you in navigating to other areas.
• Captioning an image should be done with <figure> and <figcaption>, in fact captioning anything should be captured in this way.
• When citing something it is best practice to include the quote within <blockquote> and within that include the citation inside <cite>
• When accepting numbers in a form use <input type="number" /> this has the added effect of allowing people to use the up and down arrows to increment and decrement their choice.

Some Schema to be aware of

I am a big fan of schema.org, it has been adopted as the standard for several semantic tools including Google when it visits and scrapes your site for content. Here are some of my most used schemas.

• A blog post should use the Blog schema
• If you are reviewing something you should use the Review schema
• A comment section can be marked up with the UserComments schema
• If you happen to be talking about them, there is even a schema for veins!“ (I haven’t actually ever used this!)

Some ARIA roles to be aware of

ARIA roles are to be used when the meaning of an element isn’t self evident. For example before we had the <nav> element you could have used <ul role="navigation"> to say that this was a navigational element.

Here are some of the more common roles that you can use without too much additional thought.

• If you have a search form on your site you should mark it up with <form role="search">
• If you have an alert appear on screen that doesn’t require any additional input from the user you should mark it as such. <div role="alert">
• If for some terrible reason you have a carousel on your website (don’t have a carousel on your website) you should mark it up with <div role="marquee">

A quick disclaimer at the end

If you view the source of this page I am likely making some of the mistakes which I have said should be avoided – this site is on my list of things to fix!