LOXEO.click
The way a website is built has a great influence on the success of the website itself.
Apart from the usual suspects (UX / UI and content), HTML Markup is another factor that plays a key role in the success -or failure- of a website. A properly formatted HTML has many great advantages:
Clean & readable
Reading an HTML code built with HTML5 semantic elements is just like reading a book: it's a pleasure and makes sense. Simply put, semantic tags are HTML tags that have a meaning. So, rather than using anonymous (i.e. non semantic) tags like span or div we can choose from a rich semantic HTML "vocabulary". Here is comprehensive list of of HTML5 semantic tags. Some of them are rather specific and addressed to specific niches but most of them should immediately make sense and their use should be self-explanatory. They just "make sense"" - that's what semantics is all about after all :)
Maintainability
A well-formed semantic website is more maintainable. A clear semantic structure helps to define the website's layout. Our brain is wired for extracting information and structuring it into larger semantic categories. For this reason, reading a semantic website is easier than reading a website entirely build on span or div. Changing the structure, or the content, of a "semantic" web-page is simple and it can even be done using an automated process (using a robot/script to parse the HTML structure sounds an awful lot similar to what search engines do ...).
Search engines love a well-formed website
A clean, well-formed and data-rich website helps search engines to understand what the website is about. Search engines can use semantic tags and embedded data to extract the so-called rich snippets.
Semantic HTML may not be enough to get a snippet THAT rich, though. You have to use Microdata - more about this in the following posts. Nonetheless, as Search engines become smarter and smarter at understanding our content, we can make their lives easier by serving clean, readable and semantically meaningful websites. This, in turn, is likely to improve the website's ranking and provide a richer search experience for the user!
How many Brick & Mortar retails are using semantic markup?
HTML5 was introduced quite some time ago along with new specifications (and semantic tags) that can help us to build cleaner structures for our websites. You would expect businesses to be on top of these new specifications, considering how much their business depends on whether they can be found on a SERP (Search Engine Results Page)
So we decided to run a quick audit on some local restaurants' websites (N=15) to analyze the use of semantic vs non-semantic tags. We were pretty surprised to find out that many of the new semantic tags -even the most basic and useful like <nav> or <footer> - were NOT used. In many cases the old way of doing things was preferred for representing a footer: <div class="footer">. Using semantic tags not only would make the page cleaner and more readable but it would also remove those extra character needed to specify the role (i.e. footer) of the non-semantic <div> - we are big fans of optimization here :)
Considering that the websites analyzed here are all local businesses we also found rather disappointing the fact that not a single website was using the <address> tag. Moreover, every business was reporting their phone number but no one used the following structure:
<a href="tel:+1111111111">111-111-1111</a>
This link is THE best call to action for a restaurant. One click to make a phone call. No need to dial any number!
Here are some other oddities we discovered:
- the br tag is widely used - we use it too, I must admit...
- Many table tags are still used. Most of them are used for menus (it makes sense) but using 243 table elements (actual data) on a single page seems a lot!
And none of the websites we have analyzed is using Microdata - more on this in future posts.
Our mission is to make the web as semantic as possible by both using the right tags and taking advantage of microdata. Not only we will make the web a more meaningful (and usable) place but also your business will benefit from this "data-driven" change.
Embrace the positive change and talk to us!