Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge of what is the difference between I, em, b, and strong elements in HTML5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Distinguish and explain in detail

First of all, from the point of view of the display effect alone, without adding additional css, the text surrounded by I and em tags will be rendered in italics, and the text surrounded by b and strong tags will be bold. As shown in the picture

The effect is as follows:

And simply represent bold and italic styles at the beginning of their creation, but when it comes to HTML5, these two tags are also given semantics for semantic features, and styles are less important because that's css's business. However, the semantics of the above two groups of tags still have their own emphasis, and the following are described one by one according to the specification:

I introduction

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

The I element represents a text with different voice or tone in ordinary text, indicating to some extent a text with different characteristics, such as a taxonomic name, a technical term, a foreign language idiom, a transliteration, an idea, or the name of a ship in a western text.

For example:

/ / taxonomic name

The Felis silvestris catus is cute.

/ / terminology

The term prose content is defined above.

/ / Foreign language idioms

There is a certain je ne sais quoi in the air.

You can apply class to the I tag to indicate the intention of using this element, so that if you need to modify this particular style in the future, you do not need to carefully check all the documents to change it. When using the I tag, it is recommended to consider whether it is more appropriate to apply other tags, such as using em to highlight and dfn tags to define project instances.

Em introduction

Specification 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 represents an emphasis on its content. The highlighted position changes the meaning of the statement itself. Therefore, the element forms a part of the content. In this way, the degree of emphasis depends on the language.

For example (similar to accentuating a word in Chinese to indicate different meanings):

/ / this is a sentence without any emphasis.

Cats are cute animals.

/ / em surrounds Cats, emphasizing that cats are lovely animals, not dogs or other animals

Cats are cute animals.

/ / em surrounds are, representing the truth of the sentence, to refute those who say cats are not cute.

Cats are cute animals.

/ / em surrounded cute, emphasizing that cats are lovely animals, not mean and annoying animals as some people say.

Cats are cute animals.

/ / it is emphasized here that cats are animals, not plants.

Cats are cute animals.

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 an ordinary italic tag. Sometimes the I tag is more appropriate for part of the text to be different from other parts of the paragraph because of its different voice or tone. The em tag is not intended to indicate importance, but if it is for this purpose, the strong tag is more appropriate.

B introduction

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

Translation:

The b element represents a text that focuses on practical purposes without any additional importance and does not imply a different voice or tone, such as a keyword in a text summary, a product name in a review, an executable statement in text-driven software, or an introduction to an article.

For example:

/ / the following b element plays the role of highlighting keywords, but does not emphasize importance.

The frobonitor and barbinator components are fried.

/ / the following b element specializes the surrounded words

You enter a small room. Your sword glowsbrighter. A rat scurries past the corner wall.

/ / the following b element marks the introduction of the article, Kittens' adopted' by pet rabbit.

Six abandoned kittens have found an unexpected new mother figure-a pet rabbit.

Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.

...

Specification recommendations:

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h2 to h7 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

That is, when no other element is appropriate, the b tag is finally considered. In particular, headings should use H2 to H7 tags, highlight the emphasis on content with em tags, highlight important emergencies with strong tags, and text tags with mark tags.

Strong introduction

Specification description:

The strong element represents strong importance, seriousness, or urgency for its contents.

Translation:

The strong element represents the strong importance, seriousness, or urgency of the content.

Importance

Elements can be used in headings (heading), descriptions (caption), or paragraphs (paragraph) to show the importance of this part of the enclosed text.

/ / the chapter serial number is not important, it is the name of the chapter that matters. Chapter 1: The Praxis

Severity

Elements can be used to mark warnings or warning signs.

Warning. This dungeon is dangerous.

Urgency

Elements can be used to represent parts that need to be seen as soon as possible.

Welcome to Remy, the reminder system.

Your tasks for today:

Turn off the oven.

Put out the trash.

Do the laundry.

These are all the contents of this article entitled "what is the difference between I, em, b, and strong elements in HTML5?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.