Use HTML5 specifications to differentiate I, em, B, and strong elements. html5strong

Use HTML5 specifications to differentiate I, em, B, and strong elements. html5strong

Preface

Many new tags have been added for semantic HTML5. Among them, the tags I, em, B, and strong are the easiest to mix. If you have a hard time exploring them, you can't tell them clearly. This is also a frequently asked question in front-end interviews. Today from the source, that is, from the HTML5 document (https://w3c.github.io/html/textlevel-semantics.html#the-em-element) to find out exactly!

Differences 

First, the text enclosed by the I and em tags will be displayed in italics without adding css, the text enclosed by the B and strong labels is displayed in bold.

The effect is as follows:

<B> and <I> at the beginning of creation, they simply represent the bold and italic styles. However, in HTML5, these two tags are also given semantics for semantic features, style is not that important, because it is css. However, the semantics of the above two groups of tags are still focused on each other. The following describes the semantics one by one according to the specifications:

IIntroduction

Description:

The I element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

Translation:

Elements I represent a piece of text with different voices or voices in a common text. To some extent, it indicates a piece of text with different characteristics, such as a classification name, a technical term, and a foreign language idiom, a transliteration, an idea, or a ship name in western text.

Example:

// Classification name <p> The <I class = "taxonomy"> Felis silvestris catus </I> is cute. </p> // term <p> The term <I> prose content </I> is defined above. </p> // Foreign Language idiom <p> There is a certain <I lang = "fr"> je ne sais quoi </I> in the air. </p>

You can apply the class on the I tag to indicate the intention to use this element. In this way, you do not need to carefully check all documents to change this special style if you need to modify it later. When using the I tag, it is recommended to consider whether other labels are more suitable. For example, the em label is used to highlight and dfn labels are used to define the project instance.

EmIntroduction

Description:

The em element represents stress emphasis of its contents.

The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.

Translation:

The em element indicates the emphasis on its content. The highlighted position will change the meaning of the statement. Therefore, elements constitute a part of the content. In this way, the degree of emphasis depends on the language.

For example ):

// This is a sentence without any emphasis <p> Cats are cute animals. </p> // em enclose Cats, emphasizing that Cats are cute animals, not dogs or other animals. <p> <em> Cats </em> are cute animals. </p> // The em is surrounded by the fact that the sentence is true, to refute those who say that the cat is not cute <p> Cats <em> are </em> cute animals. </p> // em is surrounded by cute, emphasizing that cats are cute animals, rather than mean and annoying animals <p> Cats are <em> cute </em> animals. </p> // emphasize that Cats are animals rather than plants <p> Cats are cute <em> animals </em>. </p>

Note at the end of the specification:

The em element isn't a generic "italics" element. sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. for this, the I element is more appropriate.

The em element also isn't intended to convey importance; for that purpose, the strong element is more appropriate.

Translation:

Em is not a common italic label. Sometimes, because different voices or voices need to be different from the rest of the paragraph, this is an I tag that is more appropriate. The em tag is not intended to indicate importance. For this purpose, the strong tag is more appropriate.

BIntroduction

Description:

The B element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an ATE altervoice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

Translation:

Element B represents a piece of text that focuses on practical purposes and does not have any additional importance or imply a different voice or tone, for example, keywords in a text summarization, product names in a review, executable statements in text-driven software, or introduction to an article.

Example:

// The following B elements play the role of highlighting keywords, however, it does not play a role in emphasizing importance. <p> The <B> frobonitor </B> and <B> barbinator </B> components are fried. </p> // The B element below makes the surrounded word special <p> You enter a small room. your <B> sword </B> glowsbrighter. A <B> rat </B> scurries past the corner wall. </p> // The following B element marks the article's lead <article> 
Standard recommendations:
The B element shoshould be used as a last resort when no other element is more appropriate. in particle, headings shocould use the h1 to h6 elements, stress emphasis shocould use the em element, importance shoshould be denoted with the strong element, and text marked or highlighted shocould use the mark element.
That is to say, when there are no other elements, the B label is considered at last. In particular, the title should use the h1 to h6 labels, highlight the content with the em label, highlight the importance of urgent use of strong labels, text tags with the mark label.
Strong Introduction
Description:
The strong element represents strong importance, seriousness, or urgency for its contents.
Translation:
The strong element indicates the strong importance, severity, or urgency of the content.
Importance

The <strong> element can be used in heading, caption, or paragraph to show the importance of the surrounded text.
// The Chapter sequence number is not important, and The Chapter name is important 
Severity

The <strong> element can be used to mark warnings or warning signs.
<p><strong>Warning.</strong> This dungeon is dangerous.</p>
Acute

<Strong> An element can be used to indicate the part that needs to be seen as soon as possible.
<p>Welcome to Remy, the reminder system.</p><p>Your tasks for today:</p><ul>  <li><p><strong>Turn off the oven.</strong></p></li>  <li><p>Put out the trash.</p></li>  <li><p>Do the laundry.</p></li></ul>
Summary:
According to the standards, the semantic scenarios of em and strong are obvious. B and I are still somewhat obscure. My personal understanding is:
1. em will change the meaning of the text, similar to reading a sentence, re-reading a word or word will express a different meaning.
2. strong highlights the importance, severity, and closeness of the text.
3. The I tag is used to represent texts of different voices or characteristics. It is a bit like the italic text in the text layout (the technical terms and foreign language idioms have different contents ).
4. Label B is mainly used to highlight keywords and product names;
The semantic specification of B tags is also vague, so it is not recommended.
Summary
The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.