Semantic HTML: Best Practices for 2019

Posted on August 31, 2019 by in WordPress | 13 comments

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

Premade Layouts

Check Out These Related Posts

How to Create the Best Contact Page Possible

How to Create the Best Contact Page Possible

Posted on September 3, 2019 by in WordPress

Next to the About Page, the Contact Page on any website is likely to get the most traffic. No matter where people come to your site from, they are very likely to be on the lookout for a way to get in touch with you. They might want a phone number, an address, an email, or even where they can find...

View Full Post

13 Comments

  1. I haven’t thought of that. In my opinion as an web dev html is already pretty readable, to humans. Html itself is an easy language to understand. Hey I am all for making any job easier and semantic html does look cleaner. I would recommend it. Great post.

  2. very nice to talk about Semantic HTML, it will be better to explain how to do it with divi.

    Nice work thanks

    • That’s the point. We still don’t know how to integrate semantic on Divi…

    • Exactly. I have NO IDEA what this means to me. Is this something I NEED to use? Something I should KNOW ABOUT? Something that . . .?
      I can see how much more readable and understandable it is but then what?
      Apologies to those of you who know what to do with this knowledge. But for those of use who don’t, well, we don’t.

      • This is particularly useful to the search engines, as they now know with great probability that this particular area is also the header of the website. The header, the footer, the navigation and many more, no longer hide behind simple div tags and can be flagged.

      • +1

  3. Great article. Although I’m using some semantic HTML, it still isn’t fully implemented on our site. I didn’t realize that it can be a ranking factor, so (in the near future) I will definitely put more time in this kind of optimisation – and as you wrote – it is much easier to understand (I don’t like HTML (or any coding) so much, but with semantic HTML, it is more understandable.
    Thanks!

  4. I hope this means you are gonna add semantical options to Divi! It will be great.

  5. Not much on Schema stuff which would of been more interesting – especially regarding SEO.

  6. Yes how to use it with Divi ??? Dosn’t Divi create a LOOOOOOT of div’s and other spaghetti code 🙂

  7. Tips on where to add this code in Divi? I have a site that was designed with a footer that was built as a re-useable library element showing as a page section. Would it work to add and in the Before and After fields in the Custom CSS area?

  8. Really great post, BJ! My team and I have been actively trying to implement semantic HTML into all of our WordPress websites. Aside from being much easier to read and navigate, we’ve definitely noticed an uptick in search placement too.

    I’ve been sharing this non-stop to my colleagues!

  9. nice article, found out a few things that would help me here

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest