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

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:

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.

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.