logo-small logo-small_halloween

Semantic HTML5 for Content Writers – The Essential Guide

98
Wow-Score
The Wow-Score shows how engaging a blog post is. It is calculated based on the correlation between users’ active reading time, their scrolling speed and the article’s length.
Learn more

Semantic HTML5 for Content Writers – The Essential Guide

Jason Barnard
Semantic HTML5 for Content Writers – The Essential Guide

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.

Semantic HTML5 tags for copywritersHere 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:

Example of semantic use of h tags

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.

Colorful design vs Semantic HTML5 tags

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.


STRONG tag = important

Example of semantic HTML5 tag - strongNote 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

Example of semantic HTML5 tag - emThe 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

Example of semantic HTML5 tag - markThe 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

Example of semantic HTML5 tag - del insHere 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

Example of semantic HTML5 tag - abbrOnce 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

Example of semantic HTML5 tag - citeOnce 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

Example of semantic HTML5 tag - q

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

Example of semantic HTML5 tag - fig figcation

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

Example of semantic HTML5 tag - ol ulThe 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.

b-i-u-tag-semantic-html5-kalicube.png

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.

Conclusion

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
    OR

  • 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.

Semantic formatting with the Wordpress text editorThe text editor in WordPress uses HTML5 by default.

Like this post? Follow us on Feedly and read more interesting posts:

Follow
Almost 2 decades of experience: I started promoting my first website in the year Google was incorporated and built it up to become one of the top 10,000 most visited sites in the world.
Today I am a search marketing consultant and working hard on two SaaS: Kalicube.pro (Measuring Brand Authority) and Kalicup.com (quick and easy SEO wins from small businesses).

My column will outline how we in the world of SEO can successfully segue into AEO – Answer Engine Optimization. I will develop the details of the two major concepts your AEO strategy should center on: communication and credibility. Within these concepts, luckily for us, most (white hat) SEO tactics we use today will remain
Share this post
or

Comments

2000 symbols remain
BrainCandy Digital
Skipping heading tags for visual appeal is sometimes because people don't have the time/access/skills to change the css.
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?
Jason Barnard
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
Jason Barnard
Jeff Whitfield
Hey Jeff
Yes, that is what my clients say to me too :)
Karthik Ramachandiran
This is an excellent piece of information. Most wanted for this time. Thanks for sharing this...
Ayana Putri
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
_JASONPADEN
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.
Jason Barnard
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 :)
Arjen
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.
Jason Barnard
Arjen
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 :)
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
Jason Barnard
charles
Hey Charles
Thanks for the kind comment. Yes, the aim is to make it simpler for more content writers using the tags correctly.
Aleks Ritov
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 :-)
Jason Barnard
Aleks Ritov
hey Aleks
Glad you learned something from the article (however small :)
datingsitespot.com
yeah we all should know this ! pretty easy for me might be harder for others ! just play with it and it would be easier !