This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
158
How-to 7 min read August 15, 2019

How to use HTML tags STRONG, B, EM, I and how they differ

The <STRONG>, <B>, <EM>, <I> tags should be used for visual formatting of text on the site page. They are necessary for the arrangement of semantic and visual accents. Incorrect use of tags often misleads the reader or search engine. Why? We will understand in this article.
HTML is a hypertext markup language. With the help of it, we tell the browser what elements of the web page it has to display. If it displayed earlier only visual elements and text, then today the HTML language is capable of transmitting the semantic load of the page content. To do this, developers use special elements for text formatting.

The text is formatted for three reasons:
1
To focus the reader's attention on a specific word or phrase.
2
To focus search robots attention and help them understand the meaning of what is posted on the page.
3
To create semantically correct code as required by the World Wide Web Consortium (W3C).

Tag Values and Differences

Until recently, HTML suggested using the <B> and <I> tags to write text in bold or italics. With the advent of the new version of the HTML5 markup language, additional tags have appeared and have formed pairs similar in purpose: <STRONG> and <B>, <EM> and <I>.

Their appearance is due to the development of search engines, which are now seeking to understand the meaning of what is placed on the page. The creators proposed to distinguish HTML tags for the text that have semantic and visual formatting. Now with the help of visual formatting tags (<B>, <I>) we select a part of the text visually, and tags of semantic formatting (<STRONG>, <EM>) convey emotions.

Visually, you can never tell which tag is used on a page. HTML can be bold with <STRONG>, and with <B>, and italics through both <EM> and <I>. Then why is it so complicated?

There is a clue. If you turn on the voice articulation of the text, then the words and phrases highlighted by the <STRONG> and <EM> tags will be read by the computer with a particularly emotional intonation and volume. The whole point of this is, as the semantic formatting helps search engines to understand the context of the written (meaning).

  • <STRONG> — semantic formatting tag. It conveys the high importance of the selected text. Visually looks fatter than the main text.

  • <B> is a visual formatting tag. It simply highlights the text in bold and does not attach much importance to it.

  • <EM> — semantic formatting tag. Designed to transfer more expressive words or phrases relative to the rest of the text. Visually, the word / phrase is displayed in italics.

  • <I> is a visual formatting tag. Used for italics, but does not focus on a word or phrase.

In the W3C specification, all HTML tags are placed in two sections. <EM> and <STRONG> are in the "Structured Text" section. This means that they determine the appearance, but also takes into account the special programs that are designed to change the tone and volume.

The appearance will not necessarily be bold or italics. It can be governed by CSS styles, but still transmit to the browser the value of the more important tagged text relative to another. <B> and <I> are placed in the "Formatting" section and tell the browser how to display a text fragment.

Which tag is better to use in terms of SEO?

There are no essential guidelines on the part of search engines how to use basic HTML tags to optimize pages. Google employees deny any difference and allow to use any of them. Nevertheless, the transformation of algorithms gives reason to doubt

The mission of search engines is to provide relevant search results in response to the user request. To do this, they try to understand the meaning of what you publish on your pages. The use of semantic tags simplifies this task. They draw the attention of search robots to the words and phrases that help them determine which query the page most likely belongs to.

However, there are W3C recommendations:

In HTML5, use the <STRONG> tag for particularly important fragments. This is most relevant:

  • in the title or section title;
  • in the part of the text that has a special meaning relative to the other text;
  • to highlight important information, notify the reader about something;
  • to draw the reader's attention before he reads the rest of the information on the page.

Use the <B> tag to highlight:

  • Keywords;
  • names and titles;
  • call to action.

Use the <EM> tag when you need to pay attention to a specific part of the text. Especially if it can indicate the meaning. Let us demonstrate a simple example:

Given the sentence: "Cats — cute animals". Depending on where the <EM> tag is put, the meaning will change.

"<EM> Cats </ EM> are cute animals" — if someone claims that other animals are cute.

"Cats are <EM> cute </ EM> animals" — If someone claims that cats are nasty animals.

"Cats are cute <EM> animals </ EM>" — If someone claims that cats are cute vegetables.

If you do not need a semantic emphasis, use the <I> tag. It is appropriate to highlight quotes, phrases, designations, etc.

Conclusion

If you want to highlight keywords that make sense, use the tag <STRONG> or <EM>. Do not use these HTML tags for standard phrases, for example, "10% discount", "sale of stock balance". Highlight them with the <B> and <I> tags.

Avoid attachments with the same tags: <em> <i> phrase or word </ i> </ em>. Search engines perceive such constructions as spam and reoptimization. Focus on the official recommendations of the W3C.

Should I change the old tags on the site, according to the new recommendations? Most likely no. It will take you too much time, and will give a minimum result in the long term.

This article is a part of Serpstat's Checklist tool
Checklist at Serpstat
Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.
Try Checklist now

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits