zh
English Español Deutsch Français Italiano Português (Brasil) Русский 中文 日本語 한국어 Tiếng Việt
前往博客
Jason Barnard

Semantic HTML5 for Content Writers – The Essential Guide

98
Wow-Score
Wow-Score 表示博客帖子的参与度,是根据用户的主动阅读时间、滚动速度和文章长度之间的相关度计算得出。
此帖子为 English
Jason Barnard
此帖子为 English
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 copywriters 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:

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.


Is your content SEO friendly?

Check it with SEMrush SEO Writing Assistant

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

STRONG tag = important

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

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

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

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

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

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

Jason Barnard
专栏作家

SEMrush 专栏作家是指定期为我们的社区做出贡献的数字营销资深作者。

Founder and CEO at Kalicube

Jason Barnard is a digital marketing consultant who specialises in Brand SERPs and knowledge panels - The Brand SERP Guy.

Company: He is founder and CEO at Kalicube - a groundbreaking digital marketing agency that pioneered the concept of exact match Brand SERPs (what your audience sees when they google your brand name).

Author: Jason is a regular contributor to leading digital marketing publications such as Search Engine Journal and Search Engine Land and regularly guests on others such as Wordlift, SE Ranking, Semrush, Search Engine Watch, Searchmetrics and Trustpilot.

Speaker: He speaks at major marketing conferences worldwide including BrightonSEO, PubCon, SMX series and YoastCon.

Podcast host: The conversations are always intelligent, always interesting... and always fun! Guests include Rand Fishkin, Barry Schwartz, Eric Enge, Joost de Valk, Aleyda Solis, Bill Slawski...

Backstory: Jason has over 2 decades of experience in digital marketing, starting in the year Google was incorporated with a site for kids that he built up to become one of the 10,000 most visited sites in the world.

Why “The Brand SERP Guy”?
Because Jason has been studying, tracking and analysing Brand SERPs since 2013. Conclusion: Brand SERPs are your new business card, an honest critique of your content strategy and a reflection of your brand’s digital ecosystem. Find out more https://kalicube.pro/about/
发送反馈
您的反馈必须包含至少 3 个单词(10 个字符)。

我们只会使用您的电子邮件,以回答您的反馈。 隐私政策

感谢您的反馈!