What is semantic HTML and why is it important?

Photo by Sigmund on Unsplash

Let’s start with a story

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.

Semantics in HTML

Often times I come across an HTML code and notice that the developer has been relying on div elements to build everything. The UI looks nice and all, but it’s just not semantically correct. What is semantics in HTML? Here is a definition from w3schools.com:

“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:

<style>
.header {
  font-size: 1.5rem;
}
.content {
  margin-bottom: 1rem;
}
.bold {
  font-weight: 500;
}
</style>
<div class="section">
  <div class="header">The header here</div>
  <div class="content">
    Lorem ipsum <span class="bold">content</span>
  </div>
</div>

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:

<section>
  <h1>The header here</h1>
  <p>Lorem ipsum <b>content</b></p>
</section>

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.

Why semantic HTML?

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.

Styling techniques

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.

Typography

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:

Typography for Developers | CSS-Tricks

Masquerading

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:

.h1 {
 font-size: 3rem;
}
.h2 {
 font-size: 2.5rem;
}
.h3 {
 font-size: 1.9rem;
}

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

<h1 class="h3">The header</h1>

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.

Semantic elements you should start using

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:

• Main: Draw attention to your main content using the main tag. This is usually a good practice if you have a header, footer, and/or an aside. All of your sections can be placed inside the main tag.
• Section: If you are building a webpage that looks like it consists of different sections, then use section tag instead of div.
• Article: Use an article tag if you have a part of your website that is self-contained and can be shared/re-distributed independently.
• Aside: If you have a side menu, just use an aside tag. This tells the browser and bots that the content of the aside is not part of your main content. Usually, the content here is meant for navigation or supplementary information.
• Nav: This element is not only used in headers, it can be used anywhere you have navigation links/buttons. If there were in a side menu, use a nav to wrap all navigations. This is especially useful for search engines to recognize links to different parts of your website. It can even suggest them on the search result page.
• Time: Use this element to wrap dates and times. You can also use datetime attributes to give further information. This is used by some browsers/devices to suggest adding this date/time to the user’s calendar.
• Text tags: You have no idea how many times I see developers use a div to wrap a paragraph text. Especially with CSS frameworks like Bootstrap. I would see the text is dropped right inside a .modal-body, instead, just wrap your text with a p. There are several tags you can use to annotate them. Here are examples: p, h1-h6, blockquote, abbr, acronym.
• Description list: I think everybody has had experience developing a UI for key-value style information. For example, detailing a customer’s contact information. You would need to mention “address” and the value representing the actual address. The same goes for information like first name, last name, email address, etc. Instead of putting them inside paragraph tags, you can use a description list dl. By default, it is styled a certain way, however, you can still use typography to define how description lists look like in your application. You can totally make each entry displayed inline. You can read more about description lists here.

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.