Jason Barnard

Semantic HTML5 for Content Writers – The Essential Guide

This post is in English

Google and Bing love semantic HTML5, so it is great for SEO! This article provides a simple guide to the essential semantic HTML5 tags that content writers and copywriters should be using to better communicate with Google and Bing (and machines in general). Your competitors probably do not even come close to best practices, so the correct use of semantic HTML5 tags in your content will push you one step ahead in 2018 and beyond. So read on...

For a guide on using HTML5 to structure your web pages, please read this article

What is semantic HTML5?

If you know a little about HTML you will know that HTML tags are (mostly) used to format content; these tags tell the browser how to display the content on the page.

Some tags convey semantic information (ie meaning). Here are the most useful tags you need to know for semantic HTML5.

Here are the most useful HTML5 tags you need to know for semantics.

Read on to learn the correct usage for each...

H1 to H6 tags = headings

Everyone knows the <h> tags. They give structure to your writing, breaking it down into sub-topics and sub-sub topics. The <h1> describes the topic covered by the article taken as a whole. Below that the other <h> tags are used to give hierarchy to the subtopics. So each <h2> is a distinct subtopic of the overall topic (the parent <h1> tag). Each <h3> is a subtopic of its parent <h2> - so a sub-topic of that subtopic. And so on.

<h> tags are incredibly powerful since they identify the key subtopics of the content, their relative importance, and the relationships between them. That is a lot of semantic information being communicated. It is well worth taking the time to get this right.

Unfortunately, many web pages do not respect the semantics of <h> tags. For example, skipping straight from an <h1> to an <h3> because “it looks nicer”. Do not do this. Use <h> tags semantically, to represent the structure and use CSS / classes to control the visual aspect of the texts.

Tip: Although headings go all the way from H1 to H6, it is very very unusual to use anything beyond H4. Once you get as far as H4, you should ask yourself whether your article is covering too many sub-topics and could be broken down into several articles instead.

Using tags semantically - an example:

Important! The color, size, and horizontal position of the text in the above example is completely irrelevant to the semantic meaning of the tags.

Semantically, the HTML below is exactly the same thing.

Bear in mind throughout this article that the visual presentation of the text within semantic HTML tags does not affect the semantic meaning those tags convey to a machine.

Is your content SEO friendly?

Check it with SEMrush SEO Writing Assistant

Please specify a valid domain, e.g., www.example.com Please specify a valid domain, e.g., www.example.com

STRONG tag = important

Note that I have provided two examples of presentation. The design of the text within the tag is not linked to the semantics of the strong tag.

If a word, or several words, have more importance than the others in the sentence, use the <strong> tag.

For SEO, although it is very tempting to put <strong> tags around all your keywords, don’t. Overuse dilutes the effect and will trigger spam filters. Use sparingly and use correctly.

EM tag = emphasis

The design of the text within the tag is not linked to the semantics of the em tag.

If a word or several words should be read with more emphasis in order for the sentence to make more sense, then use the <em> tag. Reading this sentence aloud, you will have placed vocal emphasis on the word “this”. 
A screen reader will add emphasis to their (robotic) voice when it encounters this tag.

MARK tag = highlight as important within the context

The design of the text within the tag is not linked to the semantics of the mark tag.

This is used to mark (or highlight) text to bring the reader’s attention to the text due to its close applicability to the user’s current activity / context. For example highlighting the short answer to a question.

DEL tag = Text that has been deleted after initial publication
INS tag = Text that has been inserted after initial publication

Here I changed my mind about my favorite cuisine after a trip to Thailand :)

You can use this to indicate updates and modifications; use <ins> in conjunction with <del>

ABBR tag = abbreviation / acronym

Once again, we can display the text anyway we choose. The semantic meaning of the abrr tag does not change.

This is used less often, but is great for disambiguation (ambiguity is an enormous problem for Google and Bing). Putting this tag around the word “WHO” indicates explicitly that we are talking about the World Health Organization.

CITE tag = citing a work or a person

Once again, we can display the text anyway we choose. The semantic meaning of the cite tag does not change.

In HTML5, text within a tags represents the name of a person or the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc).

In the above example, we explicitly state we are talking about the book.

BLOCKQUOTE tag = long(ish) quotation

Info: <blockquote> should include a <cite> tag to indicate the original source. You may either link to the original source within the blockquote tag using a link element (invisible to the reader) or display a text identifying the original source (preferably with a link). I have shown both here (also fine).

Q tag = short quotation

The <q> tag is more appropriate for short quotations. Browsers usually surround <q> text with quotation marks. If the quotation spans multiple lines, you should use the <blockquote> tag.

FIGURE FIGCAPTION tags = illustrative element

The <figure> tag is used for self-contained content that is part of the natural flow of the surrounding content. For our purposes, that means images, maps, and charts. You may add a caption either above or below the image - simply place that inside <figcaption> tags within the <figure> as shown above.

UL OL tags - lists

The choice of <ul> or <ol> adds semantics (meaning) to the list.

Not strictly semantic, but I cannot overstate the usefulness of ordered and unordered lists. They are structured and thus really simple for Google to digest and understand. It is surprising how often these are confused.

<ul> = no indication of the order
<ol> = the order (in this case my preference) is explicit

What, no <b>, <i> and <u> ????

B I U S tags = to all intents and purposes redundant

These are all still valid HTML, but semantically useless and bring no SEO benefit.

The most overused (and useless) HTML tag: <b>

The first (and most common) error is using bold as an SEO trick to "boost" a keyword. It doesn't.

The most confusing HTML tag: <i>

Italics is also an SEO trick to "boost" a keyword.  It doesn't.

The most misleading HTML tag: <u>

Underline is sometimes used as an SEO trick to "boost" a keyword. It doesn't. Plus, it looks like a link.

The <i> <b> <s> <u> tags bring no SEO value
and are, to all intents and purposes, redundant.
In 99% of cases, one of the semantic HTML5 tags described in this article is more appropriate and should be used instead.

HTML5 and accessibility

Many aspects of HTML5 for SEO correspond to best practices for accessibility (screen readers for the partially sighted). Alt, title, em, strong…

Google is essentially blind, so any accessibility-related HTML5 that truly helps a screen reader will help Google (and your SEO).

So, my advice is to really think about accessibility/screen readers when marking up your pages.


Correct implementation of semantic HTML5 is already incredibly important and will become more so in the coming years. Google and Bing (and other crawlers) can only do half the job at recognizing the nature of the content. As HTML5 Rocks (almost) says “The better job (we do) at marking the right semantics of the content the easier will be for robots to deal with it.“ HTML5 Rocks

For the moment, most content writers have no idea how to use semantic HTML5 tags, and use (the wrong) non-semantic tags. Understanding and correctly implementing just the few tags above will put you ahead of the curve.

Bonus Tip: WordPress and Semantic HTML5

Great news for WordPress users - the basics are done for you as long as you either:

  • Write directly in WordPress and use the default formatting buttons

  • Copy/paste the text from your Word processing application (Word, OpenOffice, Google Docs, Pages...)  without formatting and then apply the formatting using the WordPress text editor.

The text editor in WordPress uses HTML5 by default.

SEMrush Content Platform

Empower Your Content Strategy with Data

Please specify a valid domain, e.g., www.example.com Please specify a valid domain, e.g., www.example.com
Another great article. After reading the related guide on semantic HTML I had to see more and this site did not disappoint.
Very nice post. I absolutely appreciate this site. Keep it up! visit elstel to read more
Great Article! Very Useful. I would like to share a tutorial video about HTML5. So please visit:-https://www.semrush.com/blog/best-practices-in-semantic-html5-for-content-writers/
Thanks for this helpful article, Jason!

I am pretty vast in semantic HTML, but I wasn't aware of the importance of the "ABBR tag" and "cite tag" to search engines and the insignificance of the "b i u and s" tags.

I learn something new everyday on the SEMrush blog! :)

Thanks, great article!
Good job, Jason.
I was about to go more in deep about semantic html in my 14 killer tips for SEO copywriting > [link removed by moderator], but you already did it. The semantic html, reinforces the idea of writing about humans but keeping in mind search engines.

Somebody should develop a Wordpress plugin that makes life easier when it comes to SEO our articles. But I mean more than KWs placement and all this stuff, a proper text editor focused on SEO in needed, not only to guide beginners or not SEOs with corrections and tips, but also to save time to more advanced copywriters.

I just would like to add, that the italic , is not only used for emphasis purposes, but also to write words in another language or incorrectly used terms. So, for this purpose wouldn't be redundant. SEO is not the only thing that matters ;)

semantic html5 + structured data markup + proper and relevant SEO article = audience and search engines in love of us
Rodolfo Tiolo
Thanks !
Excellent share Jason thank you for the article. learned a couple of new ones ;)
Shane Pollard
Very glad to hear it was helpful :)
Skipping heading tags for visual appeal is sometimes because people don't have the time/access/skills to change the css.
BrainCandy Digital
AGreed. That is a bit of a problem.
Ideally, they would do valid HTML5. If they really cannot, then other tactics can make up for that loss
Great article, pointed out my attention to HTML5 tags and screen readers which I ignored before. But I think there is a mistake in this article according to semantic HTML5 essays mentioned here. There is two h1 tags in this article's itself. Am I wrong?
Mustafa İzgi
Hi Mustafa
The article gives the best practices. The SEMrush platform allows very little control over the HTML to us writers, so ironically the article itself does not follow those practices :)
Didn't know that about the tag. I will implement this more now. Thanks.
As the new semantic is developed and it will change the SEO game this article is great for anyone who needs to know about it.
Great little guide! Thanks for the tips :-) Time to go through the 200 or so blogs and implement the changes haha
Jeff Whitfield
Hey Jeff
Yes, that is what my clients say to me too :)
This is an excellent piece of information. Most wanted for this time. Thanks for sharing this...
I often use bold, italic, and underline. The existence of this article, thank you. Because it has changed the way of writing on the blog I manage
The semantics for media is very helpful, I'm working on a new site about mobile click through rate. [link removed by moderator] , and having not just my media, but all my html done the right way is obviously crucial. Thanks for the high value content.
Thank goodness for Wordpress. I was just about to freak out while reading this, thinking, "holy ----, I need to go fix SO much." But I checked the source codes and they're there! Same with Craft. I DO have to go back and add abbreviation semantics though.
Jessica K
Wordpress sorts out MOST problems. As long as you don't copy/paste from Word
ABBR is a really nice "extra" that I suspect makes quite a difference.
If you have the time, do it :)
Great article for content writers. Are you planning for a follow up article for front-end developers? I think it would be useful to provide them with some insight on how best to use tags like article, section, nav, aside, etc. for SEO.
Hi Arjen
Thanks for the kind words !

I already wrote an article about those tags here https://www.semrush.com/blog/semantic-html5-guide/

Enjoy :)
Jason Barnard
Nice! That answers most of my questions on HTML5 semantics.
great insight, which I knew this before today.
hlo jason
your post is really impressive it is very good for beginners and you provided short cuts that do a smart work with less time
Hey Charles
Thanks for the kind comment. Yes, the aim is to make it simpler for more content writers using the tags correctly.
Thanks, Jason. This post seems very useful, but very basic for me. I thought i knew all tags in HTML5. Nope! I didn't know ABBR tag :-)
Aleks Ritov
hey Aleks
Glad you learned something from the article (however small :)
yeah we all should know this ! pretty easy for me might be harder for others ! just play with it and it would be easier !
Add a comment