<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常见的文本语义标签

HTML标签 b 和 strong 的区别的更多相关文章

  1. HTML标签<b>与<strong>以及<i>与<em>的区别

    在一般情况下,<b>和<strong>标签的显示效果一样,<i>和<em>标签的显示效果一样.那么它们的区别在哪呢?我们应该使用哪种标签呢? 在w3sc ...

  2. title与h1的区别、b与strong的区别、i与em的区别?

    title与h1的区别 定义: title是网站标题, h1是文章主题 作用: title概括网站信息,可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的,是显示在网页Tab栏里的: h1突出 ...

  3. 探究@property申明对象属性时copy与strong的区别

    一.问题来源 一直没有搞清楚NSString.NSArray.NSDictionary--属性描述关键字copy和strong的区别,看别人的项目中属性定义有的用copy,有的用strong.自己在开 ...

  4. iOS中assign,copy,retain之间的区别以及weak和strong的区别

    @property (nonatomic, assign) NSString *title; 什么是assign,copy,retain之间的区别? assign: 简单赋值,不更改索引计数(Refe ...

  5. assign,copy,retain的区别以及weak和strong的区别

    @property (nonatomic, assign) NSString *title;    什么是assign,copy,retain之间的区别?      assign: 简单赋值,不更改索 ...

  6. iOS开发——基础篇——assign,copy,retain之间的区别以及weak和strong的区别

    @property (nonatomic, assign) NSString *title; 什么是assign,copy,retain之间的区别? assign: 简单赋值,不更改索引计数(Refe ...

  7. em和i , b和Strong 的区别

    这两对标签最大区别就是一个给搜索引擎看的,一个是给用户看的. b标签和strong标签给我们的主观感受都是加粗,但对搜索引擎来说b标签和普通的文字并没有什么区别,而strong标签却是起强调作用的. ...

  8. htm 中 <b>和<strong>的区别

    显示上两者没有任何区别,都是粗体<b>:为了加粗而加粗,推荐使用 css font-weight 属性来创建粗体文字.<strong>:为了强调而加粗,表示十分重要.在网页中使 ...

  9. script标签async和defer的区别及作用

    作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 ...

  10. html中<a>标签_top和_parent的区别

    在html中,<a>标签有个target属性,而targe属性有四个值,分别是:_blank._self._top._parent.前两个相信很好理解,第一个就是在新窗口中打开的意思,第二 ...

随机推荐

  1. 词云图大师(WordCloudMaster)上线Web端!

    我们非常激动地宣布,词云图大师(WordCloudMaster)现已正式上线Web端!这一全新版本为用户带来了更多的便捷和功能,让创建和分享词云变得更加轻松.无论是企业.教育机构还是个人用户,都可以通 ...

  2. 秒懂全文:盘点13个各具特色的AI智能阅读助手工具

    在当今信息爆炸的时代,AI阅读工具正在革新我们的阅读方式,成为了提高效率.优化阅读体验的关键. 这类AI阅读辅助工具,只需要上传文件或者输入链接,便可以直接以聊天对话的形式进行一键总结和智能问答,满足 ...

  3. css移动端适配方法

    一:前端开发的常用单位 1.像素(px)     1.什么是像素(Pixel)?     在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素     例如div尺寸是1 ...

  4. Linux内核信号SIGIO使用实例讲解

    一.信号 1. 基本概念 信号是在软件层次上对中断机制的一种模拟,在原理上,一个进程收到一个信号与处理器收到一个中断请求可以说是一样的.信号是异步的,一个进程不必通过任何操作来等待信号的到达,事实上, ...

  5. 关于为什么使用 ASCII GBK Unicode编码

    关于为什么使用 ASCII GBK Unicode编码 由来:大家都知道计算机最早是美国人为了更加便捷的存储和计算数据发明的,但是呢计算机底层都是硬件,只能存储像0101这样的二进制数据,那美国人为了 ...

  6. springboot 大文件切片上传

    1. 前端(vue element ui & 原生) 初始变量声明: currentFile: {}, // 当前上传的文件 bigFileSliceCount: 20, // 大文件切片后的 ...

  7. 模N取余法实现大整数进制转换 ——C语言版(2-16进制均可)

    思路如标题所说采用模N取余法,难点是这个除法过程如何实现. 个人推荐先到这篇博客学习一下,大佬的思路就是不一样:大数除法--超详细讲解 我所做的就是在上面博文代码的基础上增加了循环,用一个字符数组逆序 ...

  8. Docker镜像源地址

    Docker镜像源地址(1)官方镜像:https://registry.docker-cn.com(2)网易镜像:http://hub-mirror.c.163.com(3)清华大学:https:// ...

  9. 函数防抖-TS实现

    什么是函数防抖? 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时 实现很简单,大体就是设置一个变量来记录定时器,每次触发事件的时候就看定时器是否存在,如果存在清除一下,然后重新开启一 ...

  10. elementUI 时间线居左显示

    elementUI 时间线居左显示 一.vue + elementUI 实现时间线 Timellne 中时间戳居左显示 二.效果图 三.实现方法 关键代码: <el-timeline> & ...