HTML标签 b 和 strong 的区别

<b>标签和<strong>标签都表示加粗,效果通常是一样的:


<b>义演丁真<strong>义演丁真


类似的还有<em><i>,都表示为斜体。

那么他们有什么区别呢?首先他们并不是在任何情况都一样。如果使用无障碍阅读器阅读网页,strong标签会被重读,而b标签不会。

更深一步来讲,他们的语义不同。b标签表示Bold,即字体加粗(我希望里面的内容用粗体显示),而strong标签表示“强调内容”(这里面内容要着重显示)。

在CSS不流行的年代,HTML本身需要来指定样式。所以b, i, small, sup这类标签就可以指定字体样式和大小,他们的语义就是“设置字体的形态大小(Bold Italic等)”;而strong, em这类标签语义上即为“重点(strong)和强调(emphasis)”,并不一定有什么特定的格式,只是通常strong用粗体,而em用斜体而已。所以他们的显示通常没有区别,意义却有区别:一个是“为了加粗而加粗”,一个是“因为强调而加粗”。

而在CSS流行的年代,加粗,大小等样式管理与HTML没啥关系了,b, i这样的字体样式标签逐渐少见,strong, em这类语义标签备受推崇。一方面,想要粗体斜体自己设置CSS就可以,避免了b的使用;另一方面,着重加强也并非必须要粗体斜体。使用strong可以方便的用CSS更改strong的其他样式。

现代HTML规范是这样描述这些标签的:

  • <strong>:「strong importance for its contents」 着重的内容。
  • <b>:「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」无强调意味的加粗

什么是无强调意味的呢?比如文章的作者,或者生物双名,再或者书名电影名,他们需要斜体粗体,用strong和em显然就不合语义。从这个角度来讲,markdown中的斜体一般都转换成em而非i,粗体都转化成strong而非b,好像不是一个很合理的选择(毕竟加粗不代表强调嘛)。

常见的字体样式标签:b, i, small, sup, sub, bdo。他们可以用CSS效果完全替代。


拓展阅读:HTML常见的文本语义标签

posted @ 2022-07-17 10:46  Ofnoname  阅读(812)  评论(0编辑  收藏  举报