<b>和<strong>,<i>和<em>有什么区别?


778

<b><strong><i><em>HTML / XHTML 之间有什么区别?您什么时候应该使用它们?



至少到目前为止,我在StackOverflow中看到的所有内容都使用<b>元素“固定”了
OverCoder 2015年

MDN对这些标签应如何使用明确的说明(举例): ,<em>,,<strong><b><i>
totymedli

Answers:


1043

它们对普通的Web浏览器呈现引擎具有相同的效果,但是它们之间存在根本的区别

正如作者在讨论列表中写道:

考虑三种不同的情况:

  • 网页浏览器
  • 盲人
  • 手机

“粗体”是一种样式-当您说“粗体”时,人们基本上就知道这意味着在字母周围添加更多(比如说“墨水”),直到它们在其余字母中脱颖而出。

不幸的是,这对盲人没有任何意义。在手机和其他PDA上,由于屏幕分辨率非常小,因此文本已经为粗体。如果不弄乱某些内容,就无法加粗。

<b>是一种样式 -我们知道“粗体”应该是什么样子。

<strong>但是,这表明应该如何理解。“强”可能(而且经常确实)在浏览器中表示“粗体”,但对于像Jaws这样的口语程序(对于盲人)也可能意味着较低的语气,或者用下划线表示(因为您不能将粗体粗体)。

HTML从来都不是关于样式的。做一些搜索“蒂姆·伯纳斯-李”“语义网”。 <strong>是语义它描述它围绕文本(例如,“这段文字应该比你显示的文本的其余部分强”),而不是描述如何其围绕文本应显示(例如,“这段文字应该是粗体”)。


158
注意,<B>和<i>都没有被在HTML5弃用。它们的新用途是在语义上表示样式(或预期的表示形式),而<strong>和<em>表示structure。您必须阅读stellify.net/…–
Natan Yellin

11
很好的答案,但我会说“您不能将粗体显示为粗体”是错误的,因为当font-weight:采用更可变的方法时,您假设它是一个布尔概念。现在已经存在高保真度的屏幕,因此存在一定程度的大胆。
TravisO 2013年

4
@TravisO我相信他是在谈论Palm Pilot的特定技术限制。
Brian Ortiz

4
我不认为一堆字母具有任何内在含义,如果我们这样决定,<b>可以具有与<strong>完全相同的语义。阅读者的决定是什么,他们是区别对待还是完全相同?
2013年

20
@deathApril但是他们做到了!他们确实有意思!HTML不是由您所相信或决定的来定义的。
李斯特先生,2013年

229

<b>并且<i>是明确的-它们分别指定粗体和斜体。

<strong>并且<em>是语义的-它们指定所包含的文本应以某种方式“强”或“强调”,通常是粗体和斜体,但允许通过CSS控制实际样式。因此,这些在现代网页中是首选。


15
很好的解释。另一方面,对于HTML 5,<i>和<b>是语义的,而不是显式的。叹。
OregonGhost,

1
是吗 我落后于时代...!
托尼·安德鲁斯

5
是的,我读过的最好的解释是stellify.net/…–
Natan Yellin

25
HTML5b和具有新的语义含义i。它们是在不引起强调(),重要性(for )或相关性(for )的情况下需要引起人们注意散文的一部分或抵消普通散文时应使用的标记。用于关键词,产品名称,可操作词等,而用于技术术语,思想,短语等。坦白地说,IMO,这两者之间需要有更大的区别。emstrongmarkbi
chharvey 2012年

2
太糟糕了,stellify.net的文本(和标题)在大多数便宜的办公室显示器和设备上是完全不可读的^^(缺乏对比度简直是惊人的)
Oskar Duveborn 2012年

24

<strong><em>在文档中添加额外的语义含义。碰巧的是,它们还为您的文本提供了大胆的斜体样式。

您当然可以使用CSS覆盖它们的样式。

<b><i>在另一方面只适用的字体样式,不应再使用。(因为您应该使用CSS进行格式化,并且如果文本实际上很重要,那么无论如何您都可能会将其设置为“强”或“强调”!)

希望有道理。


2
如果您说不再使用<b>和<i>,那不支持<em>和<strong>的旧浏览器又如何呢?
尼尔曼

4
@Nirman如果某人使用旧的浏览器来浏览Web,则从视觉和安全角度来看,他或她已经遇到许多问题。因此,我认为程序员和设计师不应再支持旧的浏览器。
yeyo 2014年

4
注意:如果说旧的浏览器,则是指Netscape 3和IE2(IE3和NS4已支持<strong>和<em>)。如果您确实需要继续支持那些20世纪的浏览器,那么您将遇到很多麻烦。
李斯特先生,2017年

<b> and <i> on the other hand only apply font styling and should no longer be used.HTML5官方文档另有说明。需要引用吗?

1
这个答案是在发布HTML5约6年之前发布的!
詹姆斯,

8

这是定义的摘要以及建议的用法:

<b>...文本跨度关注所正在绘制功利的目的,而不输送任何额外的重要性,并没有暗示替代的语态和语气,如关键词在一个文档抽象,产品名称在评论中,可操作的话在交互式文本驱动软件或文章目录

<strong> ...现在代表的是重要性,而不是强调。

<i>...以一种替代的声音或心情表达的一段文本,或者以某种不同的方式偏离正常散文,表示某种不同的文本质量,例如分类名称技术术语来自另一种语言惯用语思想,或西方文字中的船名

<em> 表示重点。

(这些都是W3C来源的直接引号,并增加了我的强调。请参阅:https : //rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elementshttp://www.w3.org /TR/html401/struct/text.html#h-9.2.1(原始)


7

<b><i>都与样式有关,而<em><strong>是语义。在HTML 4中,第一个分类为字体样式元素,第二个分类为短语元素

正如您所指出的那样,<i>并且<em>通常被认为是相似的,因为浏览器经常以斜体显示这两者。但是根据规范,<em> 表示重点<strong> 表示更强的重点,这很明显,但是经常会被误解。另一方面,何时使用<i>或何时使用之间的区别<b>实际上是样式问题。


1
strong并不表示“更加强调”,而是“ 重要性”。为了加强强调,请将一个em元素嵌套在另一个em元素内。
chharvey 2012年

@ TestSubject528491,如果您点击我上面使用的短语元素的链接,您将看到我刚刚引用了规范。我不认为这与重要性的语义相冲突,也不认为在em强调中嵌套两个s强调,我理解您的意思。
卡里姆2012年

3
我认为HTML5规范只是在两者之间做出了更大的区分。在我的解释中,“强调”是指语调上的强调。例如,“您想穿THOSE牛仔裤吗?” 与“你要买入那些牛仔裤?” 由于强调位置而有不同的含义。OTOH,“重要性”不会根据展示位置产生影响。例如,“ 警告:当心狗!” 如果删除了重要性,它将具有相同的含义。
chharvey 2012年

<b> and <i> are both related to style嗯 HTML5官方文档另有说明。需要引用吗?

上面为HTML 4链接的@vaxquis:<b><i>是字体样式元素,而<em><strong>是短语元素。有什么建议可以改善吗?为了完整
起见

7

尽管<strong><em>在语义上当然更正确,但似乎肯定有合理的理由将<b>and <i>标签用于客户编写的内容。

在此类内容中,单词或词组可能会以粗体或斜体显示,并且通常不由我们来分析此类粗体或斜体的语义推理。

此外,这样的内容可以指粗体和斜体词和短语,以传达特定的含义。

一个例子是英语考试题,指示学生替换粗体字。


“在语义上更正确”?你是什​​么意思?您是否已阅读b / i标签上的HTML5规范?

4

<em><strong><i>和消耗更多带宽<b>

他们还需要更多的输入(如果不是自动生成的)。

它们还会使编辑器屏幕上出现更多文本。我似乎还记得程序员一样喜欢较小的源文件。(让我们成为现实,它们是相同的。是的,存在“技术性” 差异(<i> 咳嗽 </ i>,哎呀,对不起,),但这首先是虚假的。”

使用以上任何标签,您可以使用样式表来自定义样式,但是如果需要它们与默认的呈现方式不同时,可以使用它们。


1
大声笑,这应该是公认的答案(HHOS)。在整个页面上,您的答案都是最真实,最正确的答案,即使这只是个笑话。关于“语义学”的整个事情从一开始就是一个愚蠢的游戏。大家都知道,所有提出此问题的人都在与主要的浏览器供应商(Chrome,Firefox,IE等)合作。我们只想知道真正的实际的差异可能是什么,而不是委员会在讨论什么它有大量的业余时间。
GDP2

2

正如其他人所说的,<b>和<i>是显式的(即“使此文本变为粗体”),而<strong>和<em>是语义的(即“应强调此文本”)。

在现代网络浏览器的背景下,很难看到差异(它们似乎都产生相同的结果,对吗?),但请考虑为视障人士使用屏幕阅读器。如果屏幕阅读器遇到<i>标记,它将不知道该怎么办。但是,如果遇到<em>标签,它就会知道应该将其中的内容强调给侦听器。在其中,您得到了实际的区别。


<b> and <i> are explicit (i.e. "make this text bold"),嗯 HTML5官方文档另有说明。需要引用吗?

2

<i><b><em><strong>标签是传统代表性。但是在HTML5中它们赋予了新的语义含义

<i><b>用于HTML4中的字体样式。<i>用于斜体和<b>粗体。在HTML5中,<i>标签具有新的语义含义,即“ 替代语音或语气 ”,<b>标签具有在样式上偏移的含义。

<i>标签的示例用途是-分类名称,技术术语,另一种语言的惯用语,音译,思想,西方文本中的船名。如 -

<p><i>I hope this works</i>, he thought.</p>

<b>标签的示例用法是文档摘录中的关键字,评论中的产品名称,交互式文本驱动软件中的可操作单词,文章线索。

以下示例段落在样式上从其后面的段落偏移。

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>并且<strong>在HTML4中具有强调和强调的含义。但是在HTML5中,这<em>意味着强调重点,并且<strong>具有很强的重要性

在以下示例中,在阅读... 之前的单词时应该进行语言更改。

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

在同一示例中,我们可以<strong>如下使用标记。

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

重视活动日期。

MDN参考:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/b

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/i

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/em

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/strong


1

正如其他人所指出的,区别在于<b><i>硬编码字体样式,而<strong>和则<em>规定了语义,而字体样式(或说浏览器语调或您拥有什么)决定了语义(在呈现文本时(或说)。

如果可以的话,可以将其视为“物理”字体样式与“逻辑”样式之间的区别。稍后,您可能希望更改显示方式<strong><em>文本,例如,通过更改样式表中的属性以添加颜色和大小更改,甚至完全使用不同的字体。如果您使用的是“逻辑”标记,而不是硬编码的“物理”标记,那么您只需在样式表中的一个位置更改显示属性,然后所有引用该样式表的页面都会自动更改,而无需曾经不得不编辑它们。

很漂亮吧?

这也是style=为段落,表单元格,标题文本,标题等以及使用<div>标签定义子样式(使用文本标签中的属性引用)的基本原理。您可以在样式表中为逻辑样式定义物理表示,并且更改将自动反映在引用该样式表的网页中。想要源代码的其他表示形式吗?重新定义您的“代码”样式的字体,大小,粗细,间距等。

如果使用XHTML,甚至可以定义自己的语义标记,并且样式表将为您完成物理字体样式和布局的转换。


1
您可以使用样式表来完全更改<b><i>渲染的方式。很漂亮吧?
Thomas Eding 2014年

bi没有编码任何东西。就像任何HMTL标记一样,它们具有默认的CSS样式,就像任何标记一样,您可以对其进行更改以使其符合您的期望。
Mecki '19

1

实际上,出于这个响应线程中提到的原因,我同时使用了<strong>和<b>。有时候,粗体显示某些文本看起来会更好,但在语义上并不一定比句子的其余部分重要。这是我目前正在处理的页面上的示例:

“检索有关<b>长曲棍球</ b>的所有<strong>所有</ strong>书。”

在那句话中,“全部”一词非常重要,而“曲棍网兜球”则不那么重要-我只想用粗体表示,因为它代表一个搜索词,所以我想在视觉上加以区分。如果您正在使用屏幕阅读器来查看页面,我真的认为不必强调“长曲棍球”一词。

我倾向于想象大多数Web开发人员都使用其中一种,但是两者都很好-正如某些人所声称的,<b>绝对不被弃用。对我来说,这只是视觉吸引力和意义之间的一条细线。


1

仅在由于任何原因使CSS样式类不方便或无法使用时才使用它们(例如博客系统,仅允许在帖子中使用某些标签,并最终允许使用嵌入的样式)。另一个原因是支持非常古老的浏览器(某些移动设备?)或原始搜索引擎(提供点<b><strong>标记,而不是分析CSS样式)。

如果可以定义CSS样式,请使用它们。


1

对于使用<b> 标签的文本加粗

对于使用<strong> 标签的重要文本

对于使用<i> 标签的文本斜体样式

对于使用<em> 标签的强调文字


0

<b><i>应避免使用它们,因为它们描述了文本的样式。而是使用<strong>和,<em>因为它描述了文本的语义(含义)。

与HTML中的所有内容一样,您应该考虑的并不是真正的外观,而是真正的含义。当然,对您而言可能只是粗体和斜体,而对于屏幕阅读器而言则不是。


2
完全不正确,不应避免使用<b>和<i>。它们在HTML5中具有语义。
user2867288 2015年

0

bi表示您希望文本显示为粗体或斜体。strongem表示您希望以用户理解为“重要”的方式呈现文本。默认设置是将strong表示为粗体,将em表示为斜体,但是其他一些文化可能会使用其他映射。

像程序中的字符串一样,bi将被“硬编码”,而strongem将被“本地化”。


0

“它们具有相同的效果。但是,XHTML是一种更干净的HTML新版本,建议使用该<strong>标记。strong更好,因为它易于阅读-含义更清晰。此外,它还<strong>传达了含义-显示文字强烈-虽然<b>(用于粗体)传达了一种方法-粗体化文本,但是使用Strong时,如果您使用CSS样式表来更改使文本变粗的方法,则代码仍然有意义。

<i><em>“ 之间的区别也是如此。

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong


0

HTML格式元素:

HTML还定义了特殊元素,用于定义具有特殊含义的文本。HTML使用<b>和<i>之类的元素来格式化输出,例如粗体或斜体文本。

HTML粗体和强格式:

HTML <b>元素定义粗体文本,没有任何额外的重要性。

<b>This text is bold</b>

HTML <strong>元素定义强文本,并增加了语义上的“强”重要性。

<strong>This text is strong</strong>

HTML斜体和强调格式:

HTML <i>元素定义斜体文本,没有任何额外的重要性。

<i>This text is italic</i>

HTML <em>元素定义了强调的文本,并增加了语义重要性。

<em>This text is emphasized</em>

The HTML <b> element defines bold text, without any extra importance. The HTML <i> element defines italic text, without any extra importance.嗯 HTML5官方文档另有说明。需要引用吗?

0

您通常应该尽量避免<b><i>。引入它们是为了在创建CSS之前在HMTL早期版本中布局页面(更改外观),例如同时删除font标签,并且主要是为了向后兼容而保留,因为某些论坛允许内嵌HTML,这很容易更改文本外观的方式(例如BBCode使用[i],您可以使用<i>等等)。

自创建CSS以来,实际上不再需要在HTML中进行布局,这就是为什么首先创建CSS的原因(HTML ==结构,CSS ==布局)。这些标记将来也可能消失,span如果您需要“无意义”的字体变化,您毕竟可以使用CSS和标记使文本加粗/斜体。HTML 5仍然允许它们,但声明以这种方式标记文本没有任何意义

<em><strong>另一方面,它仅表示“强调”或“强调”某些内容,从而使浏览器完全了解如何进行渲染。默认情况下,大多数浏览器将em按照strong标准的建议显示为斜体和粗体,但是并不一定要这样做(它们可能使用不同的颜色,字体大小,字体等)。您可以使用CSS以所需的方式更改行为。您可以根据需要将其设置为em粗体strong,例如将其设置为粗体和红色。


7
HTML 4中不弃用<b>和<i>,即使在即将发布的HTML 5中也仍然完全支持<b>和<i>。<em>和<strong>不能替代它们。另请参见w3.org/TR/html401/index/elements.html
thomasrutter,2009年

1
@thomasrutter它们仍然在HMTL5中,但含义不同,并且对如何使用它们或如何不使用它们进行了非常详细的说明。请注意,这些标签没有意​​义(粗体和斜体不是含义,它们是设计说明,而HMTL则是含义,CSS则是外观设计)-HTML是关于描述文本的内容,而不是如何呈现文本(已分开)在HMTL3之后,有充分的理由)。
Mecki '16

-2

<strong>并且<em>是抽象的(人们说这是语义时的意思)。 <b>并且<i>是使事物“强”或“强调”的具体方法

比喻:

无论<strong><b><em><i>

“车辆”就是“吉普车”


1
我不明白为什么这个答案被否决了。具有相似内容的许多其他答案已广受欢迎。
aditya_m

-4

我们将<strong>标签用于具有较高优先级的文本,以用于SEO,例如产品名称,公司名称等,而<b>简单使其变粗。

类似地,我们使用<em>SEO优先级高<i>的文本,同时使文本简单斜体。


4
一些HTML标记确实具有SEO应用程序。元描述,元机器人或规范链接仅举几例。就我们所知,无论从理论上还是在实践上,强项都不是其中之一。
羊皮的
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.