Semantic HTML: Best Practices for 2019

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 “hey, this is just the footer, so don’t hurt me for duplicate content, please.”

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.

<p>This is <b>bold text</b></p>
<p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>

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.

<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p>
<p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>

We are also fond of del to show strikethrough deleted text.

<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>

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.

<p>Make sure that you remember <strong>this term for your test</strong>.
<p>But you should remember <mark>this information about how to use it in context</mark>.</p> 
<p>If you do that, you will be fine.</p>

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:

<div>
  <h1>Page Title Goes here</h1>
    <p>Tagline!</p>
  <div>
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

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.

 <div class="header" id="hero-section">
  <h1 class="page-title">Page Title Goes here</h1>
    <p>Tagline!</p>
  <div class="header-menu">
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

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.

<header>
  <h1>Page Title Goes Here</h1>
    <p>Tagline!</p>
  <nav>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
  </nav>
</header>

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.

<section id="hero-section">
  <header>
    <h1>Page Title Goes Here</h1>
      <p>Tagline!</p>
    <nav>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
    </nav>
  </header>
</section>

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

Footer

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:

<div class="site-footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</div>

Whereas a semantic footer may look like this:

<footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</footer>

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.

<body>
  <div class="post-header>
    <h1>Article title</h1>
  </div>
  <div class="post-content>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
      <div class="article-aside">
        <p>Text block</p>
      </div>
  </div>
 <div class="post-footer">
    <img src="/subscribe.png">
  </div>
</body>

Now, that’s not pretty code, but works. However, it’s not pretty, and it requires a pretty decent amount of CSS to make look anywhere near readable when rendered. By using main, article, and aside, you can easily structure the page to be more readable.

<main>
  <article>
    <header>
      <h1>Article title</h1>
    </header>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <aside>
        <p>Text block</p>
      </aside>
    <footer>
      <img src="/subscribe.png">
    </footer>
  </article>
</main>

You should note, however, that you can only indicate the main content of the page a single time. Meaning that you can only use one main per page. You can nest multiple articles under a single main to indicate the a table of contents or directory of standalone content (you can even use multiple H1 tags this way to show the search engines those posts are standalone.

Takeaways

• Use a single main tag per page
• Multiple article tags can be used per page to identify separate, standalone content (including multiple H1s per page)
• Aside can be used as a sidebar or insert within a post or page

Other, Less-Used Elements

Admittedly, the elements and tags we discuss above are the most-used parts of semantic HTML. After all, nearly every website on the internet contains some combination of them, while the remaining supported semantic tags are more specific and limited. They are, however, no less useful when serving their purpose, and they help immensely with interaction and search indexing.

Details and Summary

The details and summary elements create an expanding layer of content that can be hidden to users unless they specifically activate it (like an accordion module in Divi or other page builders).

<details>
  <summary>Headline that will be shown and clicked on</summary>
    <p>Content that will be hidden</p>
    <a href="example.com">Link that will be hidden</a>
</details>

Any children of the summary will be hidden and expandable, and you can add additional text by closing the detailselement.

Figure and Figcaption

These are pretty self-explanatory. Figure is a visual aid of some sort in your post. Photo, graph, an embedded YouTube video, maybe. The figcaption, then, is the caption you add to explain the use of the figure above. While they are technical in nature for the use of the semantics, you can use this for any content you want indexed specifically as an aid in the main post or page.

<figure>
  <img src="/chart.jpg">
    <figcaption>Explanation of this chart in short text</figcaption>
</figure>

These tags are an excellent way to get a featured snippet on Google, for instance, as you are specifically indicating the solution or explanation of a problem. We advise using these because it not only cuts down on the code you use to add a caption and style it, but it also keeps the figure and the caption as a single element of the page, not separate ones.

Time

Time is one of the more rarely used tags, but when you have an event or special occasion where you specifically need the search engine to know there’s a time or date involved, use this instead of simply bolding or emphasizing the text.

<article>
  <h1>Title</h1>
   <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p>
</article>

Using datetime with the time element gives your development a much better hook into the time, which will then allow you to integrate with calendars and various other APIs. You will be able to send reminders from your site, and people will come back more often.

Conclusion

While it’s not wrong to use non-semantic HTML, if you get into the habit as you work, you will find your search engine ranking improve. That’s important, but what might be even more important, though, is that you will save yourself time in how you structure and style your site, as well as preventing a lot of headaches and technical debt for the folks who come after you on the project.

What best practices for semantic HTML do you follow?

Article featured image by whiteMocca / shutterstock.com