With the rise of rich snippets (RDFa, Microformats, or Schema.org) and the new HTML5 tags, the topic of semantic web has once again been explored more heavily by the developer community.

This topic becomes more and more important given how we carry out our daily activities. We live in an era where practically everything we do involves some digital entity. Yes! We have to admit we’re dependent on appliances, computers, phones, and of course, Google. More than that, we’re getting closer and closer to a future where these digital systems stop being mere inanimate objects and become artificial entities capable of understanding humans.

Simply put, the semantic web is a way of giving human meaning to a system’s code — a way of explaining to machines what a piece of information means, and how important it should be to a person.

Okay Leandro, that’s lovely, and the idea is great. Now be nice and show us how it’s done. Here are three tips to increase the semantics and relevance of your content.

Semantic HTML

The first step is understanding HTML tags and using them according to their purpose. Each tag has a meaning that defines its role in the document. For example, the <a> tag is responsible for creating links within the page — that is, connections between different documents.

Correctly using heading tags (<h1>, <h2>, <h3>) is an important point. These tags exist to define page titles and the importance of each title and subtitle. The H1 is the main title. The <h2> is a subtitle of <h1>, the <h3> is a subtitle of <h2>, and so on. Using them hierarchically helps convey the logical meaning of the information more precisely.

HTML5 gave us new block-level tags: header, section, footer, article, aside, and nav. These tags better define what each content block represents and its importance and relevance to the reader. Still, even HTML5 has its limits when it comes to semantic use. So let’s move to the next step: rich snippets.

Creating rich snippets with structured data

Rich snippets are created through information embedded in the document’s structure, via HTML attributes. You can add semantic information about reviews, businesses and organizations, people, products, places, events, and more.

“Rich snippets are designed to summarize a page’s content in a way that makes it even easier for users to understand what the page is about in search results.” - Google’s definition

With this information, various systems can better understand and classify what type of content is presented on a given page. Although they were created to help search engines index content and deliver relevant search results, remember that the focus should always be the user who will access that information.

So, the clearer this information is for the user, the better. On Google’s support pages, you can find specifications and examples for each of these structured data types. You can implement and test them using the Google Structured Data Testing Tool.

WAI-ARIA: making your site accessible

We should always remember that, although our site’s content should be aimed at people, in some cases the one actually “reading” the content will be a “robot.” Many people with different kinds of special needs (such as blind people) rely on machines to consume the content available on the web. And remember what the goal of the semantic web is? To help explain what a piece of information means — and in this case, it’s extremely important that the screen reader understands the content precisely, so it can then relay it to the user.

“WAI-ARIA (Accessible Rich Internet Applications) defines a way to make web content and applications more accessible to people with disabilities.” - Translated definition from the W3C

WAI-ARIA is similar to structured data. It’s a set of attributes added to the HTML code, where we can describe certain page elements and their purpose. For example, how would a blind person know where the buy button is in an online store? We can convey that through the information provided by WAI-ARIA.

On Maujor’s website you’ll find some examples of WAI-ARIA implementation. Worth checking out ;)