Why HTML Semantics Matter

Semantic markup ensures that the elements you use accurately describes the content contained within which has an important impact on accessiiblity, usability, SEO, and more.

What is semantic HTML?

Semantic HTML (also known as semantic markup) is the practice of using the appropriate tag for your content in order to accurately convey its meaning and structure.

Basic examples of semantic HTML are headings, paragraphs and lists. Without a basic structure, it would be difficult to interpret your document, particularly when relying on assistive technologies such as screen readers where no visual queues are available to provide assistance.

Non-semantic elements like <div> and <span> provide no information about their content and should be used to contain elements you wish to style. Other elements like <b> and <i> will have a visual impact but are technically non-semantic as they do not convey meaning or structure.

Accessibility

Let's look at a simple example code that has been written non-semantically. In the following, I've contained all of my text and elements in a series of <div> tags, which I'm styling with CSS. Visually, it could be styled to look exactly like the real thing.

Now let's compare to the correct, semantic way that could be parsed by a screen reader.

What happens when we try to read non-semantic code with a screen reader? Well, not much, and that's exactly the problem. The entire block will be read as one run-on sentence with no particular structure. While this may not seem like much of a problem in such a limited example, imagine attempting to go through a lengthy legal document this way. Imagine page after page of run-on sentences with no visual breaks.

In contrast, the semantic version would explicitely tell the user that "What's Next" is a level 1 heading, that "sub-title" is a level 2 heading, and that there is a list that contains two items. Additionally, using headings and lists correctly will allow users relying on assistive technologies to use shortcut keys to jump to headings, through lists, in tables, or through various content types.

SEO

Google, Bing and every other large indexing service will greatly favour semantic code, especially top-level headings which help provide an outline to your document.

Advanced

HTML can be ambiguous at times, especially if you're just starting out. One of the issues I've often encountered when auditing documents is whether to use a button element, an input button, or an anchor. HTML5 has also added a few structural tags like <section> that, at first glance, may seem non-semantic but could potentially be of some import to writing accessible code.

In short

When writing markup, ask yourself which tag best reflects your content. Don't try to hammer in a screw, there's probably a better way to do it and it's worth the extra time to research for your users, your search engine ranking and general code quality.