Semantic HTML: Why Use It?

Whenever you’re writing an email, a resume or a post on social media, you rely on the use of language. But language is more than simply using the right words. To get your point across, you also use the right tone, and give consideration to where this communication will take place.

The the World of Web Development, HTML is largely considered to be a language. But it is more than a simple technology that is used to render content in a web browser. HTML also serves as a way to provide context and tone to the content you publish on the Web.

For example, let’s say that I have a grocery list, consisting of four items. Using simple HTML to mark it up, the code may look like this:

As expected, this unordered list will render in the browser. But let’s say that I handed you a tablet or a mobile device. This mobile device is open to a web page that solely consists of this content. What would you make of it? It will render in the browser as a bulleted list, but what type of list is it? Is it my shopping list? Is it a collection of things that I like to eat? Maybe it’s a message written in secret code. Let me add some additional markup to add a sense of context.

This is a little better. By including an h2 tag in the document, I’ve let you know that this document is my shopping list. But what would I like you to do with it? Let’s add a little more markup.

This is much better. By adding a paragraph and an anchored link tag to this document, I’ve effectively communicated to you that this is my shopping list, and hopefully, you’ll buy me some groceries.

What is Semantic HTML?

The technique I have used in the above examples is known as Semantic HTML. But what is Semantic HTML exactly? From her article, Why Use Semantic HTML? Author Jennifer Kyrnin defines the term as follows:

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are and browsers know how to display them.

Jennifer’s definition is both succinct and accurate. Additionally, her article lists many of the Semantic HTML tags that are widely used today. But since its publication, newer semantic tags were added to the HTML specification, courtesy of HTML 5. So, what does HTML 5 bring to the table when it comes to Semantic Markup?

Introducing HTML 5 Semantic Tags

To best demonstrate the capabilities of Semantic HTML5 Tags, let’s look at another example. Below is the wire-frame mock-up of a very simple blog site.

Before HTML5 Semantic Tags gained widespread usage, this page might have been marked up in the following manner:

The code example above uses valid HTML. However, the extensive use of div tags is problematic. To keep this page maintainable I have to document how each div pertains to the sites content. To achieve this end I’ve used HTML class attributes, white-space and the extensive use of comments. But is there a cleaner, more elegant way of tackling this problem?

Ah, this is much better! In the older example, I used comments to describe each div on the page resulting in a much larger and bloated document. But here, I’m using the Semantic HTML5 tags, header, nav, aside, main, article, section and footer to write cleaner, self-documenting code.

Of course there are a few questions about this example that may spring to mind. First off, why is there still a div tag on this example? In the newest HTML5 specification, presentational tags like div and span are not sent out on a figurative death march, but are now only used for stylistic purposes. In the above example, a div with the wrapper class is used to style the pages layout.

Secondly, isn’t the small tag used for presentational purposes? The answer here is no. The small tag may bear a creepy resemblance to the now deprecated bold, italicize, and blink tags that were used back in the day, but it is in fact a Semantic HTML tag which is often used for legal notices on a website.

Finally, is there more HTML5 Semantic Tags that I should know about? The answer is yes. For a complete list of Semantic HTML tags, see this handy cheat-sheet from learntheweb.

Additional Reasons

Thus far, I’ve demonstrated that the use of Semantic HTML makes life a little easier to craft clean, maintainable markup for your websites. But is there any other reasons to use it?

One big reason that readily springs to mind is Web Accessibility. The Mozilla Development Network article, HTML: A Good Basis for Accessibility describes in detail how the correct use of Semantic HTML is a crucial first step in making websites accessible for those with visual or physical impairments.

This article discusses how Semantic HTML is used by assistive technologies, to convert text on a web page to audio for the visually impaired. It also describes how Semantic HTML is used by modern web browsers to implement their own built-in accessibility features, such as keyboard navigation.

Final Thoughts

In this article, I discussed Semantic HTML and how it works. Additionally, I briefly talked about how Semantic HTML provides a richer experience to your users, whether they access the web through assistive technologies, or something as simple as a web browser.

At first, the use of Semantic HTML may appear challenging, but by putting in the effort, your markup with be more maintainable for yourself and enjoyible for others.