为什么不推荐使用<b>和<i>标签?


98

这个问题是在我的一门大学课程中提出的。教授只给出了一个更具描述性的答案,但是看起来<b><i>含义都相当明确,而且比<strong>和更容易键入<em>

弃用这些标签的官方说法是什么?


38
我很确定<b>并且<i>不会弃用。
Doval 2014年


4
我倾向于这样思考:我是否希望屏幕阅读器以不同的方式阅读?如果我只想挑选一个(非盲人)读者容易找到的单词,我可能会使用b-它的字面意思是“这是粗体的”,而不是“这是强调的”。但要点是,它们的含义不同-没有贬义,只是当您过去常做bor时i,并不是通常意思是strongor em
a安2014年

1
@MichaelT我记得当我刚开始使用LaTeX时,我对从空白文档(没有样式包)开始时斜体和粗体显示文本的所有不同方式感到困惑。
科尔·约翰逊

@Luaan:即使<i><b>并没有实际被弃用,<tt>并且<u>,并且,这个问题也同样适用于那些。
超级猫2014年

Answers:


135

去年夏天,我阅读了完整的HTML5规范,每个以前的HTML规范(甚至是废弃的HTML规范),我能找到的所有CSS规范以及许多XML规范。由于我喜欢语义丰富的超文本文档,因此让我给您提供HTML5中相关HTML语义背后的想法。

在HTML5之前

HTML5之前,i并且b确实是过时的。原因是它们本质上分别像em和一样工作strong,但是只专注于表示而不是语义(这很糟糕)。

实际上,i这意味着该文本应以斜体显示(它说明了如何在屏幕上呈现该文本)。另一方面,em这意味着要强调文本(它说了一些有关文本语义的内容)。

这里有一个重要的理论差异。如果使用em,则用户代理(= browser)知道应强调文本,因此,如果在屏幕上显示文档,则可以用斜体显示(如果无法设置格式,则可以全部大写,甚至使用粗体显示)。用户更喜欢的语言),如果用户说了文件等等,它的发音会有所不同。

注意,重点实际上是语义。例如,短语

  • 是我的。(=不是狗!)
  • 那只猫是我的。(=不是你的!)

没有相同的意思。

相同的区别适用于b(粗体字体)和strong(强调强度)。

一般而言,数字写作,特别是超文本创作的一般原则是,您应将内容和样式分开。在超文本创作中,这意味着内容应在HTML文件中,样式应在CSS文件(或多个CSS文件)中。一个不同但相关的原则是文档应具有丰富的语义(例如标记页眉,页脚,列表,重点,地址,导航区域等)。这具有许多优点:

  • 对于计算机程序而言,解释文档要容易得多。这些程序包括浏览器,文本到语音应用程序,搜索引擎和数字助理。(例如,浏览器可以让您将地址保存到通讯簿中,前提是它只能找到并解释该地址。此外,如果正确标记标题,您可能会知道Microsoft Word可以为您创建并自动更新目录)
  • 以后更改样式要容易得多。(如果要更改860页文档中所有第三级标题的颜色,可以在样式表中更改一行。如果内容和演示文稿混合使用,则必须手动浏览整个文档。您可能会错过一个或两个标题,使文档显得不专业。)
  • 您可以根据情况使用不同的样式表(文档是显示在屏幕上还是打印在纸上?)。您甚至可以让最终用户自己选择样式。(我的网站提供了许多备用样式表。在IE和FF中,您可以使用“查看”菜单进行更改。)

简而言之,由于它们是与presentation有关的HTML标记ib被弃用,这是完全错误的。

在HTML5中

在HTML5 ib不再过时。相反,它们具有语义上的含义。因此,它们现在实际上是关于语义的,而不是关于表示的。

和以前一样,您em经常使用标记:“猫我的”。但是i几乎在所有其他情况下,您都会在印刷作品中使用斜体。例如:

  • 您通常i用来标记生物分类名称:“我喜欢R. norvegicus”
  • i与周围的文本相比,您可以用不同的语言标记短语:点菜
  • i在谈论单词本身时,通常会用一个单词来标记:“ 既是名词又是动词”

使用class属性指定精确用法(也是Google的“微格式”和“微数据”)也是一个好主意。而且,当然,在第二种情况下,您应该真正使用该lang属性来指定正确的语言。(否则,例如,文本语音转换代理可能会误读该文本。)

一年前左右,HTML5规范还说cite应该用来标记书籍,电影,歌剧,绘画等的名称:

  • 您如何看待性欲狂

最后,由于很久以前,它dfn被用于标记文本中短语的定义实例(例如数学定义或术语的定义):

  • 是配备了一个二元运算*这样一组X ...

因此,印刷书中的斜体字可能由四个不同的HTML5标签表示,这可能意味着很多不同的事情,这确实很棒,因为语义很好,正如我之前试图说服您的那样。(例如,您可以要求浏览器在文本中列出所有定义,以确保在考试前都知道它们。)

转到strongb,HTML5规范说strong应该使用它来标记文本的重要部分,例如警告或句子中一些非常重要的单词。另一方面,b应该用于标记需要在文本中轻松找到的内容,例如关键字。我也将其b用作列表项(LI)的标题。


1
更正:定义标记为<dfn>,不是<def>。否则,请对所有问题进行全面的总结。您关于<b>在列表项中用作标题的建议很有趣;语义方法是使用定义列表,但是由于当前没有浏览器支持display:run-in,最好使用<b><span>进行内联关键字标记。
AmeliaBR 2014年

@AmeliaBR。感谢您注意拼写错误(def)。关于定义列表:定义列表应该用于名称/值对,而我总是为此使用它们(例如,请查看我的留言簿)。我也很喜欢display:run-in,但是由于它的支持正在减少,因此您必须使用floatcontent:技巧,请参阅rejbrand.se/rejbrand/news.asp?ItemIndex=169。当我谈论使用b标记列表中的“标题”时,我并不是指名称/值对,而是简单的列表,其中我想在每个项目中使用“标题”。
Andreas Rejbrand 2014年

1
@SarahofGaia推理至少有两个缺陷,可以<b>保证文本的底气。1)屏幕阅读器,盲文显示器和其他消耗文本的方式,对于它们来说,较粗的字形是没有意义的概念。2)b { font-weight: normal },表示两者的显示样式都不固定<b>
8bittree '16

1
最后,你总是可以提供自己的CSS,如果你不放心的浏览器:b, strong { font-weight:bold; }。这样,您就可以尽可能确定。CSS是指定视觉格式的方法。HTML是关于含义(内容)的,而CSS是关于其视觉表示的。
Andreas Rejbrand '16

1
这个答案使我理解了为什么我需要将字体标签更改为css。我一直喜欢字体标记为黑体字,而现在,我明白了为什么不应该使用它们。谢谢
Andreas

58

如Doval所说,它们不被弃用。它们仍然存在,但使用方式应不同于HTML5之前的许多人。

这是关于“语义”的html。它应该描述“什么”,而不是外观。浏览器或理论上任何其他显示媒体(例如盲人阅读应用程序)都应该能够决定应如何解释。

这与为什么您不应该使用CSS类名(例如“ red”)并使用更具描述性的类来描述后面使用不同颜色的功能思想的原因类似。您稍后可能会认为绿色更好(也许应该通过使用红色代替粗体显示“强”)。或色盲用户可能具有一些特殊的浏览器设置,在其中用其他方式替换了颜色。


1
在任何情况下,最好使用<b>而不是<strong>吗?还是<strong>总是一个“更具语义”的标签?
LanceLafontaine 2014年

4
大约可以将<b>用于应“突出显示”但不能“强调”的内容,例如文本中的关键字。在技​​术文档中,您经常发现用于显示某些属性的不同文本样式,例如在编程书籍中的代码示例或技术术语。对于此类用例,可以使用技术术语<b>或<i>。
thorstenmüller2014年

3
@LanceLafontaine看看官方标准
Rufflewind 2014年

4
@thorstenmüller我认为这也是一个不好的例子...在教科书中,管理层后来决定,他们希望字体不是打字机,而不是黑体,而是使用加粗的字体,而不是黑体,在这种情况下<span class="keyword">...</span>,首先使用可节省您很麻烦。
CompuChip

2
@LanceLafontaine <b>是一个极端案例,但是有一些不恰当的案例适用<i><em>不合适的案例:物种的科学名称或英语中采用的拉丁词(您可以使用具有语言属性的span,但是还有其他各种含义- -屏幕阅读器可能会切换其他语言的语音)。尽管可以使用语义上正确的方法,但是它也可以用于斜体其他作品的标题<cite>
AmeliaBR 2014年

41

真实的故事是,bi首次过时,过时了,骂道,并anatematized在各种HTML5草案(广义上)“表象”,但后来他们意识到,这些标签被广泛使用,也被许多制作程序产生。他们不是简单地允许他们使用,而是为他们开发了人为的新“语义”定义,以允许使用元素,但仍然假装对“呈现”标记严格。新的定义从一个草稿到另一个草稿都各不相同,而且晦涩难懂:您很难找到两个人以相同的方式理解和解释它们。

抱歉,没有参考。上面的描述是跟随更改并通常在两行之间阅读草稿和讨论的结果。他们没有明确说明原因。我仍然认为这是真实的故事。

结论是:继续前进。这里没有什么用。在bi元素做同样的事情,因为他们总是有:它们使字体加粗或斜体,分别与通常的注意事项。这是您应该考虑的现实,而不是对浏览器,搜索引擎或其他软件没有影响的拟弹性“语义”。


3
这就是说,你可以仅仅通过处理遵循quasischolastic语义<b>作为一个有趣的一种<span>在默认情况下以粗体呈现。然后,如果您可以打扰,也可以给它使用一个class属性,以便在必要时可以立即重新命名使用它的多个事物,因为它们具有共同的语义。从某种意义上说,这是拟态的,人们会认为您在b.productname {font-weight: normal; font-style: italic; }改变表示方式并利用了明智的语义标记选择之后就很容易采取行动;-)
Steve Jessop 2014年

1
@SteveJessop:对于我们中仍在乎文件大小的少数人来说,这种说法<b>this</b>似乎比说合理得多<span class="bold">this</b>(前者的八字节开销足够令人讨厌;后者的23字节开销似乎很疯狂)。我想知道为什么HTML从未定义任何简短形式的表示形式,例如<@quack>this</@>等价于<span class="quack">this</span>
supercat 2014年

4
@supercat:这就是传输编码:gzip的用途。也许是XML + XSLT,具体取决于您要在何处以及如何为“嘎嘎”引入更简洁的符号。
史蒂夫·杰索普

7
@supercat class='bold'吗?无码密码的苏大师(Master Suku)将与您谈谈使用这样糟糕的类名。将此视为您的最后一个boldRedText

2
在14.4调制解调器时代,CSS是尚未在任何用户代理中实现或实现的想法。这些HTML元素仅仅是古老的遗留问题,我们将永远坚持下去。
迈克尔·汉普顿

11

<b><i>标签起源的“黑体”和“斜体”的概念。问题是这些对于某些用户代理可能完全没有意义。例如,对于盲人来说,在屏幕阅读器中,“斜体”听起来像什么?

替换为它们,<strong><em>删除了与印刷概念的直接链接。相反,用户代理可以根据需要渲染它们。


2
严格来说,用户代理可以进行渲染<b><i>但是它也认为合适。
乔纳森·尤尼斯

8

当您确实需要'粗体'或'斜体'文本时,<b><i>标记是必不可少的。

如果您正在用HTML编写方程式,其中斜体的“ I ”与非斜体的“ I ”具有不同的含义,则必须进行区分。

我对它们的思考方式与对标签<sup><sub>标签的理解方式相同-如果不使用此类“外观”标签,就无法正确表示方程式的含义。

纯粹的方法是使用MathML或TeX,但尚不支持浏览器...


14
我希望推动“语义”标记的人们会意识到,在某些情况下,旧标记比任何其他标记在语义上都更正确。如果文档的文本引用了某些带下划线的单词,那么用除下划线之外的任何方式显示这些单词在语义上都是错误的。如果要从放置了一部分文本in a monospaced typeface但没有区别的系统中导入文本,则使用“替换”之一<tt>将错误地暗示进行导入的代码比目的要了解的多。
2014年

我同意的适用性bi数学(物理)背景,但是这种用法并不在HTML5草案中提到。当我提出这个问题时,我得到了认真的回应,改为使用Unicode特殊字符(数学粗体字母和数学斜体字母)!
Jukka K. Korpela 2014年

1
@supercat:一般的主张(我承认这并不总是适用)是您不应该写用户代理不能兑现的支票。特别是,您不应该写一个声称某人的屏幕阅读器将以等宽字体讲话的页面(我想应该是一个机器人声音:我从未真正使用过屏幕阅读器)。当然,这忽略了大多数人的页面至少不会在屏幕阅读器上运行,因此,他们为自己不关心的假设可访问性付出了任何代价,这毫无意义。但是W3C 出于原则上故意忽略了这一事实。
史蒂夫·杰索普

在代码导入的情况下,我认为规范的答案(如果不能令人满意)为class="source-X-asserts-it-should-be-monospace",从而将其与语义上不同的文本区分开来,因为其他一些源出于未知原因断言该文本应该是等宽的。实际上,这是在审核HTML认为不良的内容,而不仅仅是将不良转化为HTML。
史蒂夫·杰索普

1
@SteveJessop:换句话说,我们应该改进<TT>,它直接建议将文本设置为对比的等宽字体,并带有标记,在进行了几层间接定向之后,标记将指示文本应以某种特定的字体显示,是等宽的。尽管我并不希望所有的屏幕阅读器都能做出有用的事情<tt>,但我希望他们会<tt>比使用屏幕阅读器轻松得多<span class="styleNameThisImportUtilityPicked">
supercat 2014年

0

HTML标签的设计原则是它们应该是“语义的”,即它们应该指示含义和意图,而不是低级指令。

经典的测试是“可以在盲人的浏览器中有意义地使用标签”。

因此,对于基于音频的浏览器,斜体字的“ i”几乎没有用,因为您不能使用斜体字。但是,“ em”标签很有意义,因为音频设备可以通过多种方式来强调某个短语:提高音调,增加音量或改变重音。盲文渲染器可以通过提高点的间距,改变大小或增加振动来进行强调。


正如您所说的那样,您不能使用斜体语言-但是您可以使用斜体文本,其中的斜体事实具有语义含义,例如方程式……
SAL 2014年

2
“因此,对于基于音频的浏览器,斜体字的“ i”几乎没有用,因为您不能使用斜体字。...是的,这是<img>因为您不会说图像,而没有声音硬件的系统也不会出现<audio>。有时,表示只是元素的目的,并且不需要被普遍支持(与其他可能不受支持的元素不同,<i>它不需要alt文本,因为它的斜体字是唯一丢失的信息)。真正的问题是当人们说出i自己的意思时 em
nmclean 2014年

@SAL:为什么一个人不能说“意大利语”?如果以“音高”值为100讲普通语音,则<i>标签内的文本使用120的音调,<b>标签内的文本使用80的音调,并且标签内的文本<tt>与生成文字的合成打字机同步以允许听众以便容易地区分这些标记形式。如果不是使用<i>标签而是使用a而不是使用标签,而是<span class="whatever">使用“ Acme SemiScript”而不是“ Waldorf Sans”显示文本的某些部分,则工作将更加艰巨[某些字体家族...
supercat

...没有很好的斜体字体,但是有时在使用其他字体系列编写的文本中设置纯斜体时可能看起来不错]。
超级猫2014年

@supercat您是在强调强调的语言,而不是斜体。如果您想要不同的音调,则应使用em,如nmclean所说。如果要使其斜体,请使用i。屏幕阅读器不知道该做什么,这无关紧要,因为它无所事事。书名通常是斜体,但是您的发音并没有不同。
DCShannon 2014年
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.