The difference between I, EM, B, Strong elements through HTML5 specifications

A lot of new labels have been added for semantic HTML5. Among them, the two groups of labels of i, EM, and B, and Strong are the easiest to confuse. If you don't explore well, it is really unclear. This is also a problem that often ask in front -end interviews. Today, from the source, that is, from the html5 document (https://w3c.github.io/html/textLevel-semantics.html#the-d-Element)!

First of all, from the display effect alone, without additional CSS, the text surrounded by I and EM tags will be presented as oblique, and the text surrounded by B and Strong tags will be shown thick. As shown in the figure

The effect is as follows:

<b> and <i> At the beginning of the creation, they simply represent the thick body and oblique style, but in HTML5, for the semantic characteristics, these two labels were also given semantics. The style was not so important because it was CSS What happened. However, the semantics of the two groups of labels above each have their own focus. The following is introduced in accordance with the specifications:

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 A s a taxonomic designation, a technical term, an IDIOMATIC Phrase from Another Language, Transliteration , a thought, or a ship name in western texts.

i 元素代表在普通文本中具有不同语态或语气的一段文本，某种程度上表明一段不同特性的文本，比如一个分类学名称，一个技术术语，一个外语习语，一个音译，一个想法，或者A ship name in Western text.

 // Category name <p> The <i class = taxonomy> felis Silvesstris catus </i> is cute. </P> // Terms <p> The Term <i> PROSE Content </i> is defined Above. </p> // Foreign Language Xi <p> ​​There is a Certain <i lang = feel </i> in the air. </p>

You can apply Class on the i tag to indicate the intention of using this element so that the special style does not need to check all the documents to change it if you need to modify it in the future. When using the I tag, it is recommended to consider whether to apply other tags. For example, using EM to highlight the emphasis, DFN tags are used to define project instances.

The em Element RepreSENTS Stress Emphasis of its Contents.

The Placement of Stress EMPHASIS Changes the Meaning of the Sentention. n this way depends on the lightuage.

EM element represents the emphasis on its content. Highlighting the emphasis on the meaning of the statement itself. Therefore, the element constitutes a part of the content. In this way, the degree of emphasis rely on what language is so on.

 // This is a sentence without any emphasis <p> Cats are cute animals. </P> // EM surrounds Cats, emphasizing that cats are cute animals, not dogs or other animals <p> <em> Cats </em> Are Cute Animals. </P> // EM surrounds are surrounded by, representing the fact that the sentence is a fact, to refute those who say that the cat who is not cute. /P> // EM surrounds CUTE, emphasizing that cats are cute animals, rather than some people say that the mean and annoying animals <p> Cats are </em> animals. </p> // Here Emphasizing that cats are animals, not plants <p> Cats Are Cute <em> Animals </em>. </P>

The em Element isn 'ta generic Italics element. Sometimes, text is incision to stand out from the rest of the paragraph, as if it was in a dis -different mood or voice. is, the I element is more appropriate.

The em Element Also isn 't incheng importance; for that pulpose, the strong element is more appropriate.

EM is not an ordinary oblique label. Sometimes it is more suitable for some texts to be different from the other parts of the paragraph because of different parts or tone. The EM tag is not to show the importance. If it is for this purpose, the Strong tag is more appropriate.

The B Element Repress of Text to Which Attention is Being Drawn for Utilitarian Purposes without Any Extra Importance and With No Imprinting of AN Alternate Voice 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.

E element represents a text that focuses on practical purpose without any additional importance or not implies different words or tone, such as keywords in a text summary Or an article of an article.

 // The following B elements play a role in highlighting keywords, but do not have the role of emphasis on the importance. > // The B element below allows the surrounding words to specialize. /P> // The B element below marks the introduction of the article. Mother Figure -A PET Rabbit. </B> </P> <p> Veterinary Nurse Melanie Humble TOOK The Three-Week-Old Kittens to Her Aberdeen Home. </P> ... </Article>

The B Element Should be used as a Last Resort When no other is more appropriate. In particular, headings should use the h1 to H6 Elements, ld use the em Element, Importance Should Be Donoted with the Strong Element, and Text Marked Or highlight should use the mark element.

That is to say, when there is no other element, it is finally considering the B tag. In particular, the title should use H1 to H6 tags, highlighting the emphasis on the content of the content of the content, highlighting the important emergency Strong label, and the text label using the MARK tag.

The Strong Element Represses Strong Importance, Seriousness, or Urge 13Cy for its Contents.

Strong element represents the strong importance, severity or urgent content of the content.

<Strong> Elements can be used on the headlines, capption, or paragraphs to display the importance of this part of the text.

 // The section serial number is not important, the name of the chapter is important.

<strong> Elements can be used to mark warnings or warning signs.

 <p> <strong> Warning. </strong> this dungeon is dangerous. </p>

<strong> Elements can be used to indicate parts that need to be seen as soon as possible.

 <p> <p> Welcome to reMy, The Reminder System. </P> <p> Your Tasks for TODAY: </P> <ul> <p> <strong> Turn off the oven. </strong> </ p> </li> <li> <p> put out the trash. </p> </li> <p> Do the laundry. </p> </li> </ul> </ul> </ul> </ul> </ul> </ul>

According to the specifications, the semantic scenarios of EM and Strong are obvious. The understanding of B and I is still a bit obscure. The personal understanding is:

1. EM will change the meaning of the text. Similar to reading a word or word when reading a sentence, it will express differently.

2. Strong will highlight the importance, severity, and urgency of the text.

3. In order to represent different language or characteristics of text, the I tags are a bit like those content represented by the oblique body in the typesetting (technical terms, foreign language practices, etc.).

4. The B tag is mainly to highlight the display of keywords, product names, etc.;

The semantic specifications of the B tag are also very vague, so it is not recommended.

The above is all the contents of this article. I hope that the content of this article will help everyone's learning or work. If you have any questions, you can leave a message to communicate. Thank you for your support for VEVB Wulin.com.