Hopefully, you found this post because you like making websites and are excited to make them and you always try to do the best you can when building. Even when no one can see it, you’re the type of person who wants to make sure everything works correctly under the hood. That’s great, it’s called having pride in your work so let’s dive into the semantics!
What is semantic HTML?
Semantic HTML refers to HTML tags that are used for a more specific purpose. You know how an HTML page starts with a <body> tag? Well, that’s actually a semantic tag. The nice thing about HTML is that the browser is very forgiving about the tags it displays, however, just because it works it doesn’t mean that it’s done correctly. A <div> will act the same exact way as a <section> or an <article>. The browser actually does not care how you write your HTML, as long as it recognizes a tag, content will be displayed. You might be telling yourself, “great, I don’t care either!” That is the wrong attitude and a recipe for issues down the road and you should avoid that as much as possible.
When the code runs, all HTML tags are essentially the same, but semantic HTML clarifies the roles of parts of the code. Anything can be a <div> but it would be structurally easier to understand if correct tags are being used to identify a header, a section or a button. In the previous version of HTML, the only way to identify those areas is to use either an ID or class attribute, but HTML5 encourages the use of semantic tags instead.
Some examples of newer semantic HTML tags:
<header>
<nav>
<main>
<article>
<aside>
<section>
<footer>
Why should you care about semantic html?
Semantic HTML will make your code better in many ways. It makes your code easy to understand, it’s better for SEO, and sets you up for better accessibility.
Building a web page or site is easy — until you start to build and manage multiple different ones. Every few months I would look at my own code and it isn’t recognizable. The organization is different because somehow my mode of thinking has shifted and I’ve stuck with using just divs on everything. Sticking to semantic HTML can help clear up any future confusion.
Some say it’s better for SEO, I’m not an expert but it makes sense that it would affect SEO even indirectly if search results are more relevant within your site. Have you ever seen search results that look like it’s listing the navbar as the content?
Semantic HTML is a good basis for accessibility. As an example, using the correct HTML elements for their intended purpose as much as possible not only reads better, but can carry some built in keyboard functions for those who aren’t able to use a traditional mouse. The <button> tag for instance can be activated by hitting the tab key.
Want to learn more about semantic HTML? The answer is yes.
Here are a few more people talking about semantic HTML if you need more reasons:
https://www.thoughtco.com/why-use-semantic-html-3468271
https://medium.com/adalab/the-importance-of-semantic-html-78e74fb75ff0
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML