What is Semantic Markup?

The line between web design and programming on the one hand and search engine optimization on the other has always been implicitly there. Arguably, it’s never been more explicit, now that Google is considering mobile responsiveness as part of its ranking algorithm. However, not all web developers have caught on — and neither have SEO professionals. All too many times, SEOs with little or no knowledge of HTML are bewildered when their sites aren’t ranking as well as they should be. Often, the problem is that search engines don’t know what the site is even about. Content in and of itself can only convey so much information. The other half takes place behind the scenes in the form of semantic markup.

(Re)Introducing the Semantic Web

What exactly is semantic markup? Simply put, it’s a particular way of writing HTML:

• Markup languages such as HTML (HyperText Markup Language) and XML (Extensible Markup Language) are responsible for the presentation and organization of web documents into different elements such as lists, paragraphs, headers, and footers.
• Semantics are logical and linguistic meanings, and in the context of web development this means going beyond the function of presentation and giving document elements distinctive meanings.

Semantics + Markup = Semantic Markup
Semantic markup has been around for a while, but it’s seldom utilized to its maximum potential. Why is this? Because there is typically a disconnect between presentation (i.e. web development) and content (i.e. search engine optimization). SEOs are concerned with what a piece of content says, while the designers and coders are more concerned with how the content looks and behaves.

Non-Semantic vs. Semantic Markup

For the most part, non-semantic HTML tags look exactly the same as their semantic counterparts. The following are some examples of non-semantic elements:

• <div></div>
• <span></span>

The majority of a web document can probably be written using these two tags alone. The problem is that they organize but don’t convey meaning, i.e. they tell the web browser nothing about what the content contained within them actually is. By contrast, the following tags will organize efficiently while giving meaning to the markup at the same time:

• <article></article>
• <aside></aside>
• <footer></footer>
• <header></header>
• <main></main>
• <nav></nav>
• <section></section>
• <time></time>

With this kind of semantic markup, the header, footer and main body of the document are well-defined and laid out. The <nav> tag will also delineate navigational elements such as menus and pagination. <article> will communicate that the page is a blog post or news article rather than an ordinary web page, while the <section> tags will do the job of dividing this article into logically related sections.

Why is Semantic Markup Important?

If it looks and feels the same as ordinary HTML, why should developers concern their selves with semantically marking up their documents? There are a number of reasons.

Best Practices

First and foremost, semantic design is a W3C standard. If for no other reason, it should be conformed to simply because it is the preference among all web browsers, IT companies and search engines. It’s also considered best practice because it improves workflow among developers themselves. If one developer is handed a page that has been semantically marked up by another developer, they will get a better sense of the functionality of the whole document and its individual components.

User Experience

In certain cases, semantic elements actually do look and feel different. It is more convenient for screen readers and browsers when content is semantically structured. This way, they spend less time trying to distinguish one <div> element from another. Another case in point is rich snippets, which can actually be viewed in search engine results and have been shown to increase click-through rates.

Good Design = Good SEO

Lastly, semantics are integral to SEO. The proof of this is the SEO obsession with keywords. Keywords signal to search engines that a site’s content is relevant to a given search query. However, this only goes so far. For instance, marking up a blog post with the semantic <article> tag lets the search engine crawlers know that this web page contains editorial content. Thus, for example, a blog post can rank not only for “graphic design,” but also for more long-tail searches such as “articles about graphic design.”
In any case, semantics let all concerned parties — from other developers to search engines to the users their selves — know that he developer knew what he/she was doing at the time they wrote the code. It’s exactly like correctly formatting a research paper: the contents of the paper only mean so much. Without the correct formatting, citations, etc., it has not met its fullest potential.