What is semantic HTML and why is it important?

Imagine this scenario, you’ve recently acquired an enormous amount of books and decided to open a book store to sell them, but also to maintain a source of income. Not knowing how book stores should operate and never personally been into one, now you have to think about it yourself and build it from scratch. Let’s bring all books and lay them down on the store floor. Now you’ve decided to start organizing these books in a way that makes it easier for customers to find books they’re interested in. “Shelves!”, your brain shouts. But the only thing you know how to work with is cardboard boxes (hypothetically). So you start making a shelve-like structure from cardboard boxes. You cut the opening lids, set them on their side, put books inside of them, and then piling them on top of each other. Now you’ve realized that you need other items like benches, tables, chairs, cashier desks, all sorts of things. Since you only know how to work with cardboard boxes, you’d start repurposing, reshaping, and painting these boxes to fit these profiles. Now a customer walks in and pauses with every item he sees, takes a book after a while of searching, buys it, and leaves the store.

From your perspective, these items achieved their desired purpose and you’ve actually sold a book. The reason why the customer was pausing in front of each item is that the first impression of looking at each item is that it’s a cardboard box, but it’s shaped like something else, a table, shelves, a chair. This is happening because you’re not using familiar items that were created for this specific purpose. Instead, you’re using one element (cardboard box) to create everything.

“Semantic element clearly describes its meaning to both the browser and the developer.” — W3schools.com

What does that mean? HTML is a markup language, a markup language is used to annotate different parts of a document to make them distinguishable from each other. If a book consists of one type of element, you can imagine how it will be difficult for the reader. A reader expects headers, chapters, table of contents, page numbers, and so on. The same thing applies to HTML here. A developer needs to annotate the document to tell its different parts. Some elements have semantics likes p, h1, and section. While other elements have no semantics like div or span. The latter only used to wrap certain parts for styling purposes. Here is an example of a non-semantic HTML:

As you can see, the different parts are actually styled to look like a header and a paragraph with a bold text in the middle. However, the browser doesn’t know that, nor does search engine bots. Here is an example of how it looks like if you were to use semantic HTML:

Not only it took you less code, now it is semantically correct for browsers, bots/crawlers, and accessibility apps, and other tools to recognize the different parts.

But why bother in writing a semantic HTML? The user definitely won’t see the difference if you style these div‘s correctly. However, when you’re building your webpage, you’re not just dealing with humans. Bots in this case can be facilitators. For example, you’re selling an item, and someone searches online for a similar product. Now search engines will start suggesting results from different sites. If your markup is written semantically, these search engines will have a better understanding of the content and description of the item you’re selling, therefore, displays more details about your product and hopefully be appealing enough for the user to visit your site and makes the purchase. Yes, in this case, semantic HTML helped to sell your product!

Apart from search engines, you’ve got screen readers for people with disabilities. Screen readers will read your content better if it knows the different parts of your content. Some even allow skipping sections and locating information on the page. Another user of your semantic markup would be browser extensions. There are multiple extensions that read your markup, an example would be an extension that enables a “reader view” that takes the content of the page, puts it in a container removing distractions, and allowing the user to change font size, font family, background color, and more.

But now you might be thinking, “I don’t want the header to be as big as an h1“. When writing HTML, think about it as if you were writing a book. Do not skip heading levels just so you can get a certain font size. If your design requires the heading of each section to be smaller than an h1 tag, do not use another heading tag, because that would break the flow. If Google were to extract information from your webpage and show it, it will get confused to see that your document starts with an h3 tag. These heading tags are not created to differentiate among font sizes, there were created to differentiate multiple levels of your content (text). Logical order and design can go together if you want them to. You should write your HTML as if you were writing a book. A chapter must have a title, regardless of how the title looks like, its position on the page, or font family. If you want your h1 to look like an h3, then just use CSS to do that. There are two ways you can achieve that.

You can define your typography beforehand if all of your headers need to look a certain way. In a nutshell, it’s the way you arrange your text in a way that is clear, logical, and appealing to the reader. As for how to create, manage, or maintain your typography, this is where it gets complicated and you may find several theories in this subject. I recommend reading this article from css-tricks.com to get a better insight:

I just came up with this name because that’s what this technique is doing. You would define classes that override heading styles making them look like other headings. For example:

And then you will see something like this in the HTML:

Before you get confused, let me explain. By doing so, you have kept the integrity of your document’s flow while styling the header to match your design for that specific part. Additionally, you’ve also kept the consistency of your text sizes and avoided using arbitrary font sizes across your project.

Now you’ve come to realize the importance of semantic HTML (hopefully), let me recommend few elements you can start using that improves your markup semantics:

Always remember, a div purpose is just to put your content into an imaginary box for styling purposes only. The final HTML tag wrapping your content should almost never be a div.

Feel free to give your opinion or ask questions in the comment section below.

Related posts:

As evident from the title, this blog post is about the gems I across on Twitter through 2018 although it was a byproduct of my social-media-induced-dopamine addiction (which I’ve overcome). As…

Azure Resource Manager (ARM) is the native Infrastructure-as-Code language created by Microsoft. ARM templates are written in a JSON-like format and provide the ability to create Azure resources…

If you look beneath the surface of Multi-Level Marketing you can find some invaluable sales skills.