What is Semantic Markup?

building-semanthic-markup

Anatomy of a website, day 3

There are a lot of circumstances that you might have come across the term “semantic markup”. You might be trying to learn how to build websites like a pro, or you might be trying to find a way to rank higher on search engines. If either one of these people is you, then let me first say congratulations for trying to make the web a better place. Semantic markup is awesome, but it is also one of those tools that is underestimated and underused. I wrote this article to hopefully bring you over to team “Semantic Markup”, so let’s dive into what semantic markup is all about.

What is Semantic Markup?

If you’ll recall on Anatomy of a Website Day 2, I mentioned that HTML was a markup language. That means that the language is built to give the content inside HTML elements a structure that can be used to create visual meaning. A heading tag, <h1> for example, will make the content inside the tag larger. So structurally the element is given a visual meaning that users can connect with and understand. It’s a good solution to the need for website structure, but only a handful of the original HTML tags created any sort of meaningful purpose. Sure, you could structure your page into a topic and a selection of sub-topics using heading tags. But you can’t tell the difference between when bold text, <b>, is actually highlighting an important point or when it is being used as a design element. There was just too much ambiguity in some HTML elements. In other elements, like <div> and <span>, there is no meaning at all.

Developers knew that as the web grow in size, it would need to create a way to eliminate ambiguity and increase HTML’s clarity. In 2014, HTML started gaining traction, and one of the biggest changes was the introduction of HTML elements that acted like a div, but gave the div content meaning. Some of the new elements are pretty straightforward, like you put footer content into a <footer> element, header content into a <header>, and your navigation menu into a <nav> element. Some of the elements were well understood in the visual effect of the tag, but are still misunderstood as to when they are appropriate to use. For example the <b> tag does the same thing as <strong>, these two tags do the same thing, but one of them creates semantic meaning and the other is more appropriate for design purposes.

This image features an HTML block element page, described using semantic markup elements.
This is an example of how a search engine sees your website and determines its structure.

Semantic markup supercharges HTML from just being a means to create structure to being able to create meaning. That’s pretty cool, right?

Why does semantic markup matter?

Now that I’ve told you what semantic markup is, let me tell you why it should matter to you. Visually, there’s no difference between using the bold tag and the strong tag. The effect of the two tags is exactly the same to the reader of the content. However, not all site visitors are human, but they are some of your most important and loyal readers. No, I’m not talking about the Red Lectroids from the 8th dimension (yes, I’m one of the 5 people who actually saw “The Adventures of Buckaroo Banzai Across the 8th Dimension”). I’m talking about search engine web crawlers.

Web crawlers, or spiders, are the algorithm based AI that search engines use in order to index the internet. These automated scripts crawl all over the internet and index web content, they create summaries, and they file your content according to their understanding of your content. But unlike humans, spiders don’t load the website up and view your content visually. No, instead they crawl over your websites code and extract meaning from the content inside your HTML tags. The problem is that while these spiders are getting smarter based on Google Search Algorithms, they still are highly limited in their understanding of the internet.

This is where the importance of semantic markup really kicks in. Now you have markup you can use to break your page up into meaningful sections. That’s where <header>, <nav>, <footer>, <aside>, <article>, etc.… comes in. The semantic nature of HTML’s new elements gave developers the opportunity to increase clarity for Google & Bing’s web crawlers, and in return the search engines started rewarding content creators who embraced semantic markup.

Aside from web crawlers, semantic markup also created a way for web developers to understand page structure more quickly and with less ambiguity. If you don’t see the value of that consider how quirky web developers can be. I once worked behind a guy who gave all of his div class names based on Star Wars terminology. It was a lot of fun for him, but it took me a minute to understand the difference between a jawa and tauntaun in his page structure. Left to our own devices, these are the kind of inside jokes that some professional code monkeys will engage in.

So semantic markup actually makes it easier for web developers to work together and the coding output is just cleaner. Semantic markup matters, because it leads to better search engine rankings and keeps developers from wanting to kill each other.

How do you use HTML semantically?

Using semantic HTML is achieved by doing two things, learning what semantic options you have and then using those options appropriately. That’s the accurate answer, but it probably isn’t very helpful to you. My advice is to start with the most important, and probably most often used, semantic html tags. I’ve purposefully worked a few of those into these examples into this post, like the <header> & <footer>.

The first thing I taught myself was that when content had clear intent and there was a relative tag for that content, then use that tag. The rule of specificity is one of the most important things you can learn when dealing with any sort of markup language. When the intent of the content is less clear or is built into elements with clear intent then use a tag with no semantic meaning like a <div> or <span>. Don’t agonize over when to give content meaning or not, as you work semantically more and more, you’ll get better at knowing what markup to use and when to use it.

How do you know when to use one element over another?

I always try to bring something of value to every post, and this week I want to give you this HTML tag cheat sheet. If you ever find yourself stuck and trying to figure out when to use two tags that perform the same basic task, you can use this tag summary to help you figure out when to use each tag.

For example, if you don’t know when to use <b> or <strong> go to the tag list and look at the definitions for each.

For the <b> tag we see that this tag is used for bold text, but when you go to <strong> we are told that the strong tag is used to define text with strong importance. So semantically, if we are bolding text for design reasons, then if we use <b> tags we are writing semantic markup. If the content we’re making bold is important, then we want to use <strong> tags.

That’s all there is to semantic markup, just knowing what meaning tags give to your content.

Using semantic markup makes a difference

So now you know what semantic markup means, and if I’ve done my job in this post, you understand how important it is. The only real trick to using semantic markup is learning the purpose for each HTML element and using it according to its intended purpose.

Just remember that semantic markup requires you to separate your content from its presentation, HTML is about the basic structure of your content. Use CSS for styling and not HTML and you will probably get it right at the end of the day.

Jason Usher

Jason has been studying design and web programming for over 10 years. He's a big fan of brand-oriented design with an emphasis on value for value growth. When he is not neck-deep in market research, he enjoys photography, time with his wife and kids, and a good movie.

Leave a Comment