Table Of Contents
Semantic HTML is more important now than ever, especially since Google changes the page-rank algorithms on a constant basis. The top-spots in each query are becoming more and more competitive. You need a secret weapon, and semantic HTML is a good one to have in your arsenal. You may use some semantic code on your websites, but the more you can insert for the important content, the better search engines can crawl your site and know what you offer prospective visitors.
What is Semantic HTML?
In a nutshell, semantic HTML is HTML that humans can read and understand. Any human, not just coders and developers, and if humans can read it more easily, robots can, too. If robots can read the structure of your site more easily, then they can make a more informed decision about how well your site stands up to various search queries.
Basically, you’re telling the search engine crawlers “this is a blog post” or “this is a navigation menu” or
But how does it do that? Well, it uses a slew of special HTML5 tags that are very specific. Let’s dig into some examples, and you can see for yourself.
Text Formatting
Text formatting is the most common semantic HTML out there, and you see it every day. Formerly, single letters were used to indicate formatting, standing for either bold, italics, underline, and so on.
This is bold text
While this is italics, and this is underlined.
With semantic HTML, you use strong to bold text and show its strong importance or em to italicize (or emphasize) the text. Interestingly, U is still used to underline text; however, the MDN suggests styling it via CSS with text-decoration: underline; to differentiate it.
This is bold text, while this is italics.
This would be underlined.
We are also fond of del to show strikethrough deleted text.
We are also fond of del to show
strikethroughdeleted text.
And we thought that we would end out our look at semantic HTML text formatting with a highlight. Literally. If you use mark around text, then you’ll highlight whatever you enclose.
Make sure that you remember this term for your test.
But you should remember this information about how to use it in context.
If you do that, you will be fine.
The MDN says this isn’t to be used in the same way that you use strong. You use strong to indicate something important in the text, and you use mark to highlight something that is relevant to the understanding of it.
Sections, Headers, and Menus
Maybe the best way to start off is using headers and footers. You know, everyone’s favorite parts of websites to build and deal with. With traditional HTML, you might have a header that’s coded like this:
Looking at that code, you can see what everything is. However, that is only if you know what you’re looking at. You have a couple of nested divs (containers) that separate the title, tagline, and (incredibly basic) menu. There is nothing wrong with this set up, but there is certainly nothing really right about it, either. If you go a step further, you can use CSS id and class markup to keep things a bit more readable.
Page Title Goes here
Tagline!
With semantic HTML, things look a lot cleaner and easier to read, you don’t have to rely on divs, and the classes and ids that you choose can be solely for styling.
Page Title Goes Here
Tagline!
Isn’t that much easier to read and tell what’s going on? You have a header tag that lets you know that this is the header of the page and a nav tag that indicates a navigation menu. (It’s even smart enough to not need extra styling to list the entries horizontally.)
Technically you could also use the following code, if wanted to make sure your styles applied correctly, as well as having a way to link to a particular section of the website. In this case, the section tag works similarly to how the div tag works in the previous examples. Except, of course, it’s readable and makes sense to human eyes.
Page Title Goes Here
Tagline!
Additionally, note the use of id=”hero-section”, which is an optional step to the optional step, but you can style section as a CSS selector on its own.
Takeaways
- Use section in places you might be tempted to use an outer div.
- Use can use header to indicate what part of the page is your header. You can also use this in an article or post to indicate the header of that post, which is separate from the website itself.
- Use nav when you set a main navigation menu for the site. Nav is not a way for search engines to find links, but to find the main way users can navigate your site. Any collection of links (such as breadcrumbs, etc.) can also be included in nav
Not a lot needs to be said regarding footer, but we have to mention it. In many ways, it’s a direct analogue to header. A traditional, basic footer might look like this:
Whereas a semantic footer may look like this:
Admittedly, there’s not a lot of difference here in the basic set up, but the robots who see your site will appreciate the clarification. Also keep in mind you can use footer for either page, post, or site footers.
Main, Articles, and Asides
Another main component of semantic HTML is the article tag. Alongside that, the aside, too. Both of these let you structure the actual content of your site so the search engines know what the primary text is, which in turn lets them focus on the problem you’re solving and the topic you focus on.
Normally, a blog post or page is a simple HTML document, but the header, footer, content, sidebars, inserts, etc. can be all lumped together.
Article titleText block