Detailed explanation of the use of i, em, b, and strong elements

This time I will bring you a detailed explanation of the use of i, em, b, and strong elements. What are the precautions when using i, em, b, and strong elements. Here are practical cases. Let’s take a look. one time.

Preface

For semanticHTML5 has added many new tags. Among them, the two sets of labels i, em and b, strong are the most easily confused. It’s really unclear if you don’t explore them carefully. This is also a question often asked in front-end interviews. Today, let’s find out from the source, that is, from the HTML5 document (https://w3c.github.io/html/textlevel-semantics.html#the-em-element)!

Detailed explanation of the difference

First of all, from the perspective of display effect, without adding additional css, the i and em tags surrounded by Text will be italicized, and text surrounded by b and strong tags will be bolded. As shown in the figure

##iIntroduction ##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.

译文：

i The element represents in A piece of text in ordinary text that has a different voice or mood, indicating to some extent a piece of text with different characteristics, such as a taxonomic name, a technical term, a foreign language idiom, a transliteration, an idea, or in a Western text A ship name.

Example:

// 分类学名称
<p>The <i>Felis silvestris catus</i> is cute.</p>
// 术语
<p>The term <i>prose content</i> is defined above.</p>
// 外语习语
<p>There is a certain <i>je ne sais quoi</i> in the air.</p>

IntroductionSpecification Description:

The em element represents stress emphasis of its contents.

Translation:

The em element represents emphasis on its content. The placement of emphasis changes the meaning of the statement itself. Therefore, the element forms a part of the content. The degree of emphasis expressed in this way depends on the language.

Example (similar to stressing a word in Chinese means different meanings):

// 这是一句不带任何强调的句子
<p>Cats are cute animals.</p>
// em 包围 Cats，强调猫是种可爱的动物，而不是狗或者其他动物
<p><em>Cats</em> are cute animals.</p>
// em 包围 are，代表句子所说是事实，来反驳那些说猫不可爱的人
<p>Cats <em>are</em> cute animals.</p>
// em 包围 cute，强调猫是一种可爱的动物，而不是有人说的刻薄、讨厌的动物
<p>Cats are <em>cute</em> animals.</p>
// 这里强调猫是动物，而不是植物
<p>Cats are cute <em>animals</em>.</p>

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.

Translation：

em is not one Plain italic labels. Sometimes for parts of the text that need to be distinguished from the rest of the paragraph due to different voice or tone, the i tag is more appropriate. The em tag is not intended to indicate importance. If it is for this purpose, the strong tag is more appropriate.

Introduction

规范描述：

// 下面的 b 元素起到突出关键词的作用，但不具备强调重要性的作用
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
// 下面的 b 元素让被包围的词特殊化
<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>
// 下面的 b 元素标注了文章的导语
<article>
  <h2 id="Kittens-adopted-by-pet-rabbit">Kittens 'adopted' by pet rabbit</h2>
  <p><b>Six abandoned kittens have found an
    unexpected new mother figure — a pet rabbit.</b></p>
  <p>Veterinary nurse Melanie Humble took the three-week-old
    kittens to her Aberdeen home.</p>
  ...
</article>

// 章节序号不重要，章节的名字才重要
<h1>Chapter 1: <strong>The Praxis</strong>
</h1>

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

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>

The above is the detailed content of Detailed explanation of the use of i, em, b, and strong elements. For more information, please follow other related articles on the PHP Chinese website!