HTML / XHTML中<b>
和<strong>
,<i>
和<em>
之间的区别是什么?你什么时候应该使用它们?
答案 0 :(得分:966)
它们对普通网络浏览器渲染引擎具有相同的效果,但它们之间存在基本差异。
正如作者在a discussion list post写道:
考虑三种不同的情况:
不幸的是,这对盲人来说毫无意义。在手机上 和其他PDA,文本已经是粗体,因为屏幕分辨率非常小。如果不搞砸,你就不能大胆加粗。
<b>
是一种风格 - 我们知道“粗体”应该是什么样的。
<strong>
然而表示应该理解某些内容。 “强”可以(并且经常)在浏览器中表示“大胆”,但它也可能意味着像Jaws(对于盲人)这样的演讲程序的低调,或者由下划线表示(因为你不能加粗在Palm Pilot上大胆地说。
HTML从来就不是关于风格的。为some searches和“语义网做"Tim Berners-Lee"。 <strong>
是语义的 - 它描述了它所环绕的文本(例如,”此文本应该比显示“”的其他文本强,而不是描述 “这段文字应该是粗体”)。
答案 1 :(得分:213)
<b>
和<i>
是明确的 - 它们分别指定粗体和斜体。
<strong>
和<em>
是语义的 - 它们指定所附文本应该以某种方式“强”或“强调”,通常是粗体和斜体,但允许控制实际样式通过CSS。因此,这些在现代网页中是首选。
答案 2 :(得分:24)
<strong>
和<em>
为您的文档添加了额外的语义含义。恰巧它们也为您的文本提供了大胆和斜体的风格。
你当然可以用CSS覆盖他们的样式。
另一方面, <b>
和<i>
仅应用字体样式,不应再使用。 (因为您应该使用CSS格式化,如果文本实际上很重要,那么无论如何您可能会使其“强大”或“强调”!)
希望这是有道理的。
答案 3 :(得分:8)
虽然<strong>
和<em>
在语义上更正确,但似乎有正当理由将<b>
和<i>
标记用于客户编写的内容。
在这样的内容中,单词或短语可能用粗体或斜体表示,通常我们无法分析这种粗体或斜体的语义推理。
此外,这样的内容可以指粗体和斜体的单词和短语以表达特定的含义。
一个例子是英语考试问题,指导学生替换粗体词。
答案 4 :(得分:7)
<b>
和<i>
都与样式相关,而<em>
和<strong>
是语义。在HTML 4中,第一个被归类为font style elements,后者被归类为phrase elements。
正如您所说,<i>
和<em>
通常被视为相似,因为浏览器通常以斜体显示。但根据规范,<em>
表示强调,而<strong>
表示强调,这很清楚,但经常被误解。另一方面,何时使用<i>
或<b>
之间的区别实际上是一种风格问题。
答案 5 :(得分:7)
以下是定义摘要以及建议用法:
<b>
...一系列文本,用于实用目的而不引起任何额外的重要性,并且没有其他声音或情绪的暗示,例如关键词文档摘要,评论中的产品名称,交互式文本驱动软件中的可操作的字词,或文章。
<strong>
......现在代表重要而不是强调。
<i>
...以一种表达不同文本质量的方式,例如分类指定,技术术语,来自其他语言的惯用词组,思想或西方的船名文本。
<em>
...表示强调。
(这些都是来自W3C来源的直接引用,我强调了这一点。请参阅:https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements和http://www.w3.org/TR/html401/struct/text.html#h-9.2.1原件)
答案 6 :(得分:3)
正如其他人所说&lt; b&gt;和&lt; i&gt;是明确的(即“使这个文字加粗”),而&lt; strong&gt;和&lt; em&gt;是语义的(即“应该强调这个文本”)。
在现代网络浏览器的背景下,很难看出差异(它们似乎产生相同的结果,对吗?),但考虑视障人士的屏幕阅读器。如果屏幕阅读器遇到了&lt; i&gt;。标签,它不知道该怎么做。但如果遇到&lt; em&gt;标签,它知道应该向听众强调内在的内容。在这里你会得到实际的不同。
答案 7 :(得分:3)
正如其他人所说,区别在于<b>
和<i>
硬编码字体样式,而<strong>
和<em>
用字体样式决定语义含义(或在演示(或说出)文本时确定浏览器语调或者你有什么内容。
如果愿意,您可以将此视为“物理”字体样式和“逻辑”样式之间的区别。稍后,您可能希望更改<strong>
和<em>
文本的显示方式,例如,通过更改样式表中的属性以添加颜色和大小更改,甚至使用不同的字体面完全。如果您使用了“逻辑”标记而不是硬编码的“物理”标记,那么您只需在样式表中的每个位置更改显示属性,然后 引用该样式的所有页面工作表自动更改 ,无需编辑它们。
非常漂亮,是吗?
这也是为段落,表格单元格,标题文本,标题等定义子样式(使用文本标记中的style=
属性引用)和使用<div>
标记的基本原理。您可以在样式表中为逻辑样式定义物理表示,并且更改会自动反映在引用该样式表的网页中。想要一个不同的源代码表示?重新定义“代码”样式的字体,大小,重量,间距等。
如果你使用XHTML,你甚至可以定义自己的语义标签,你的样式表可以为你转换为物理字体样式和布局。
答案 8 :(得分:2)
HTML格式元素:
HTML还定义了用于定义具有特殊含义的文本的特殊元素。 HTML使用像和格式输出的元素,如粗体或斜体文本。
HTML粗体和强格式:
HTML元素定义粗体文本,没有任何额外的重要性。
<b>This text is bold</b>
的HTML 元素定义了强文本,并添加了语义 “强烈”的重要性。
强>
<strong>This text is strong</strong>
HTML斜体和强调格式:
HTML元素定义了斜体文本,没有任何额外的内容 重要性。
<i>This text is italic</i>
HTML元素定义了强调文本,并添加了语义 重要性。
<em>This text is emphasized</em>
答案 9 :(得分:2)
<em>
和<strong>
消耗的带宽超过<i>
和<b>
。
他们还需要更多打字(如果没有自动生成)。
它们还会在编辑器屏幕上显示更多文字。我似乎记得程序员喜欢较小的源文件,如果它们是相同的。 (让我们成为现实,他们是一样的。是的,有“技术”(&lt; i&gt; 咳嗽 &lt; / i&gt;,咳咳,不好意思)差异,但这开始时大多是虚假的。)
使用上述任何标记,您可以使用样式表来自定义它们的显示方式(如果您需要它们与默认渲染图像不同)。
答案 10 :(得分:2)
仅当因使用CSS样式类而出于任何原因而无法使用或不可能时才使用它们(如博客系统,只允许在帖子中使用某些标签,最终使用嵌入式样式)。另一个原因是支持非常旧的浏览器(某些移动设备?)或原始搜索引擎(为<b>
或<strong>
标记提供分数,而不是分析CSS样式。)
如果您可以定义CSS样式,请使用它们。
答案 11 :(得分:1)
我同时使用&lt; strong&gt;和&lt; b&gt;,实际上,正是出于这个回复主题中提到的原因。有些时候,大胆的一些文本只是看起来更好,但它在语义上不一定比句子的其余部分更重要。以下是我正在处理的页面中的示例:
“检索&lt; strong&gt;所有&lt; / strong&gt;书籍&lt; b&gt;长曲棍球&lt; / b&gt;。”
在那句话中,“所有”这个词非常重要,“长曲棍球”这个词不那么重要 - 我只是想把它大胆,因为它代表一个搜索词,所以我想要一些视觉分离。如果您正在使用屏幕阅读器查看该页面,我真的不认为它需要强调“长曲棍球”这个词。
我倾向于想象大多数网络开发人员使用其中一个,但两者都很好 - &lt; b&gt;有些人声称,绝对不会弃用。对我来说,它只是视觉吸引力和意义之间的界限。
答案 12 :(得分:1)
在这里,我要冒一个历史和现实的热点:
是的,根据规范,<strong>
在HTML4中具有语义,而<b>
具有严格的表述意义。
是的,当HTML5出现时,b
和i
引入了新的语义含义。
是的,W3C recommends-基本上是TL,DR;不要使用b和i。
您应始终牢记b元素的内容可能并不总是粗体,而i元素的内容可能并不总是斜体。实际样式取决于CSS样式定义。您还应该记住,某些语言中的内容可能不是首选的粗体和斜体样式。如果存在更具描述性和相关性的标签,则不应使用b和i标签。
但是:
现实世界中的互联网拥有大量无法更新的现有HTML。现实世界中的互联网必须考虑在庞大的软件网络和CMS系统之间生成和复制和粘贴的内容,这些软件和系统均具有不同的开发人员团队,并在不同的时代构建。
因此,如果您正在编写HTML或构建一个可以为其他人编写HTML的系统-可以肯定-一定要使用<strong>
而不是<b>
来表示“强烈强调”,因为它在语义上更加正确。 / p>
但是实际上,实际情况是<strong>
和<b>
的语义和风格含义已经随着时间的流逝而合并。
如果我要建立一个允许粘贴样式文本的CMS,则需要为<b>
中粘贴并表示“强烈强调”的人和{{1 }}的意思是“使此文本加粗”。可能不是“正确的”,但这是现实世界在此时此刻的工作方式。
因此,如果我要为该网站编写样式表,那么我可能最终会写一些看起来像这样的样式:
<strong>
或者,我将依赖于浏览器默认值,该默认值与我所知道的每种现代浏览器中的上述代码具有相同的作用。
或者,我可能是使用normalize.css, which takes care to ensure that b and strong are treated the same的数以百万计的网站之一。
世界上已经有如此庞大的HTML超出了这种预期,我简直无法想象b,
strong {
font-weight: 700;
/* ... more styles here */
}
i,
em {
font-style: italic;
/* ... more styles here */
}
会被折旧为b
或浏览器默认情况下,它们将开始以不同的方式显示它们。
就这样。那是我对语义,历史和现实世界的热切关注。 b / i和strong / em相同吗?不。在现代文明崩溃之前,它们在几乎每种情况下都可能同时存在并被视为相同吗?我想是的。
答案 13 :(得分:1)
对于使用<b>
标签的粗体文本
对于使用<strong>
标签的重要文本
对于使用<i>
标签的文本斜体样式
对于使用<em>
标签的强调文字
答案 14 :(得分:1)
i,b,em和强标签传统上具有代表性。但是他们在 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 意味着强调强调和强烈意味着强烈重要性。
在以下示例中,在阅读之前的单词时应该有语言上的变化...
<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 Ref:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
答案 15 :(得分:1)
b 或 i 表示您希望文本呈现为粗体或斜体。 强大或 em 表示您希望以用户理解为“重要”的方式呈现文本。默认情况下,将粗体渲染为粗体,将em渲染为斜体,但其他一些文化可能会使用不同的映射。
与程序中的字符串类似, b 和 i 将是“硬编码”,而强和 em 将是“本地化的”。
答案 16 :(得分:1)
“它们具有相同的效果。但是,XHTML,一个更干净,更新版本的HTML,建议使用<strong>
标签。强更好,因为它更容易阅读 - 它的含义更清晰。 ,<strong>
传达意义 - 强烈显示文本 - 而<b>
(粗体)传达方法 - 粗体化文本。强大的,如果使用CSS样式表更改内容,您的代码仍然有意义使文本变得强大的方法是。
<i>
和<em>
之间存在差异。
Google dixit:
http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong
答案 17 :(得分:1)
<b>
和<i>
,因为它们描述了文本的样式。相反,请使用<strong>
和<em>
,因为它描述了文本的语义(含义)。
与HTML中的所有内容一样,您应该不考虑如何看,而是实际意味着什么。当然,它可能只是粗体和斜体,但不是屏幕阅读器。
答案 18 :(得分:0)
您应该尽量避免<b>
和<i>
。它们是为了“布局”页面而引入的(就像同时删除的font
标签一样)并且布局在HTML中不应该完成,它应该在CSS中完成(HTM == Structure,CSS == Layout)。这些标签可能会在将来消失,毕竟你可以使用CSS和span
标签来使文字变为粗体/斜体。
<em>
和<strong>
只是说“强调”或“强烈强调”某些东西,它让兄弟完全开放如何渲染它。大多数浏览器都会呈现斜体和强大的粗体,但它们不会被迫这样做(它们可能使用不同的颜色,字体大小,字体等)。您可以使用CSS以您希望的方式更改行为。如果你愿意,可以将em加粗,例如强大的粗体和红色。
答案 19 :(得分:0)
在HTML Lang中,这两个标记的用法如下:
simple text this is test text normal text
simple text this is important textwith normal text
这两个HTML标记之间的主要区别在于,粗体使文本在视觉上看起来只是粗体,而强烈的象征意义使相应的文本成为必不可少的内容,并指示其为清晰的单词或文本部分。
这种差异是由于HTML代码区分符号和物理视觉html标签。尽管前面提到了相关区域的含义,但是后者仅定义了浏览器中的光学显示。 您可以从here
进行检查答案 20 :(得分:0)
<b>
和 <i>
没有实际语义(就像@splattne 指出的那样)是真的,很久。在现代 HTML5 (<!DOCTYPE html>
) 中,它们确实是有意义的。查看以下链接。
<b>
:Bring Attention To element
<p>Here at company XYZ, we use <b>HTML</b> and <b>Javascript</b>.</p>
<i>
:Idiomatic Text element
<p>I <i>did</i> tell him, to arrive on time for the meeting.</p>
<b>
对比 <strong>
认识到这两种元素在 HTML5 中都是有效的语义元素可能会有所帮助,而且在大多数浏览器中它们都具有相同的默认样式(粗体)是一种巧合(尽管一些较旧的浏览器实际上在 <strong>
下划线)。每个元素都旨在用于某些类型的场景,如果您想将文本加粗以进行装饰,则应实际使用 CSS font-weight 属性。 source
<i>
对比 <em>
<em>
元素表示其内容的重音强调,而 <i>
元素表示从普通散文中引出的文本。 source
我个人更喜欢<b>
和<i>
而不是<strong>
和<em>
。
它们更短,而且从开发人员的角度来看,它们的语义意义也有意义。 我不知道今天的屏幕阅读器是否可以使用它们。如果没有,我认为他们最终会。 A18n 是一个很难的话题,我只是按照文档的引导。 MDN 说我可以使用它们,所以我可以使用。
答案 21 :(得分:-1)
<strong>
和<em>
是抽象的(这是人们说它是语义时的意思)。
<b>
和<i>
是制作“强势”或“强调”内容的具体方式
<strong>
:<b>
:: vehicle :: jeep
答案 22 :(得分:-3)
我们将<strong>
标记用于具有高优先级的文本,例如产品名称,公司名称等,而<b>
simple使其变为粗体。
同样,我们将<em>
用于SEO优先级较高的文本,而<i>
则将文本简单化为斜体。