从HTML5规范弄清i、em、b、strong元素的区别
为了语义化,HTML5增加了不少新标签。其中i、em和b、strong这两组标签是最容易弄混的,不好好去探究一下,还真说不清。这个也是前端面试中经常会问的问题。今天从源头上,也就是从HTML5的文档(https://w3c.github.io/html/textlevel-semantics.html#the-em-element)中来一探究竟!
首先,单从显示效果来看,在不额外添加css的情况下,i和em标签包围的文字将会以斜体呈现,b和strong标签包围的文字则会加粗显示。如图
效果如下:
<b>和<i>在创建之初就是简单地表示粗体和斜体样式,但是到了HTML5,为了语义化特性,这两个标签也被赋予了语义,样式倒不那么重要,因为那是css的事情。但上面两组标签语义还是各有侧重,下面依照规范逐一介绍:
i
规范描述:
The
i
element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
译文:
i 元素代表在普通文本中具有不同语态或语气的一段文本,某种程度上表明一段不同特性的文本,比如一个分类学名称,一个技术术语,一个外语习语,一个音译,一个想法,或者西方文本中的一艘船名。
举例:
// 分类学名称
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p> // 术语
<p>The term <i>prose content</i> is defined above.</p> // 外语习语
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
大家可以在i标签上应用class来表明用这个元素的意图,这样该特殊样式在以后如需修改时,不需要仔细检查全部文档来更改。在使用i标签时候时,推荐考虑是否应用其他标签更为合适,如用em来突出强调,dfn标签来定义项目实例。
em
规范描述:
The em element represents stress emphasis of its contents.
The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.
译文:
em 元素代表对其内容的强调。突出强调的位置会改变语句本身的意义。因此,元素构成内容的一个部分。用这种方式表示强调的程度依赖于是何种语言。
举例(类似汉语里面重读某个词表示不同含义):
// 这是一句不带任何强调的句子
<p>Cats are cute animals.</p> // em 包围 Cats,强调猫是种可爱的动物,而不是狗或者其他动物
<p><em>Cats</em> are cute animals.</p> // em 包围 are,代表句子所说是事实,来反驳那些说猫不可爱的人
<p>Cats <em>are</em> cute animals.</p> // em 包围 cute,强调猫是一种可爱的动物,而不是有人说的刻薄、讨厌的动物
<p>Cats are <em>cute</em> animals.</p> // 这里强调猫是动物,而不是植物
<p>Cats are cute <em>animals</em>.</p>
规范末尾note:
The em element isn’t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.
The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.
译文:
em不是一个普通的斜体标签。有时为了部分文本由于不同的语态或语气需有别于段落的其他部分,这是i标签更为合适。em标签不是为了表明重要性,如果是出于这个目的,strong标签更为合适。
b
规范描述:
The b element represents 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.
译文:
b 元素代表侧重实用目的而不带有任何额外重要性也不暗示不同语态或语气的一段文本,比如一段文本摘要中的关键词、一段审查中的产品名称、文本驱动软件中的可执行语句或者一篇文章的导语。
举例:
// 下面的 b 元素起到突出关键词的作用,但不具备强调重要性的作用
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p> // 下面的 b 元素让被包围的词特殊化
<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p> // 下面的 b 元素标注了文章的导语
<article>
<h2>Kittens 'adopted' by pet rabbit</h2>
<p><b class="lede">Six abandoned kittens have found an
unexpected new mother figure — a pet rabbit.</b></p>
<p>Veterinary nurse Melanie Humble took the three-week-old
kittens to her Aberdeen home.</p>
...
</article>
规范建议:
The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the
h1
toh6
elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use themark
element.
就是说当没有其他元素合适时,最后才考虑用b标签。特别是,标题应该使用h1到h6标签,突出对内容的强调用em标签,突出重要紧急用strong标签,文本标记使用mark标签。
strong
规范描述:
The strong element represents strong importance, seriousness, or urgency for its contents.
译文:
strong 元素代表内容的强烈的重要性、严重性或者紧急性。
- 重要性
<strong> 元素可以被用在标题(heading)、说明(caption)或者段落(paragraph)上,来显示这部分被包围的文字的重要性。
// 章节序号不重要,章节的名字才重要
<h1>Chapter 1: <strong>The Praxis</strong></h1>
- 严重性
<strong> 元素可以被用来标记警告或者警示标志。
<p><strong>Warning.</strong> This dungeon is dangerous.</p>
- 紧急性
<strong> 元素可以被用来表示需要被尽快看见的部分。
<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
<li><p><strong>Turn off the oven.</strong></p></li>
<li><p>Put out the trash.</p></li>
<li><p>Do the laundry.</p></li>
</ul>
小结:
根据规范来看,em和strong的语义情景很明显,b和i的理解还是有些晦涩,个人的理解是:
1、em会对文本含义有改变作用,类似读一句话时重读某一个字或词会表达不一样的意思一样。
2、strong会突出包含文本的重要性、严重性和紧急性等。
3、i标签为了表示不同语态或特性的文本,有点像文字排版里面的那些用斜体表示的内容(技术术语、外语习语这些排版会有不同的内容)。
4、b标签主要是为了突出显示关键词、产品名称等;
b标签的语义规范也是很模糊,所以也是不太建议用。
从HTML5规范弄清i、em、b、strong元素的区别的更多相关文章
- HTML中strong与b,em与i标签的区别
先看效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 语义化HTML:i、b、em和strong标签
一.前言 在HTML4.1中i和b作为表象标签分别表示斜体和粗体样式,而强调样式与内容分离的XHTML中则出现样式效果相同的em和strong表义标签,此时我们会建议避免使用i和b标签,应该改用em和 ...
- HTML5规范尘埃落定,5个开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻.数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势.其 ...
- <b>与<strong> <em>与<i>标签的区别
<b>与 <strong>用在网页上都能使字体加粗,二者的不同是:<b>是物理元素 ;<strong>是逻辑元素. 物理元素强调的是一种物理行为.比如说 ...
- <i>和<em>、<b>和<strong>标签的区别
在HTML4.01中:< b > < i > 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,仅仅表示样式上是粗体或斜体,而没有 ...
- HTML5中重新定义的 b 和 i 元素
HTML5强调元素的语义,而非表现.b和i元素是早期HTML遗留下来的产物,它们分别用于将文本变为粗体和斜体(那时CSS还未出现). 当时的规范建议编码人员用strong替代b,用em替代i.不过,事 ...
- HTML中em与b等的区别
最近在学习HTML基本知识,看到b标签和strong还有em,都是表示强调目的的,那他们之间的区别是什么呢?总结如下: < b > < i > 是视觉要素(presentati ...
- HTML5不允许写结束标记的元素
HTML5不允许写结束标记的元素 1.area 2.base 3.br 4.col 5.command 6.embed 7.img 8.hr 9.keygen 10.link 11.meta 12.p ...
- CSS中px和em属性的特点与区别
详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...
随机推荐
- 思迅/泰格/科脉/收银软件/商超软件数据库修复解决断电造成损坏的mdb\dat文件SQL数据库 置疑 修复 恢复
拥有专业管理软件数据库修复技术工程师,专业提供管家婆.美萍.思迅.科脉等管理软件技术服务,电脑维修\重装系统技 术服务.无法登陆打不开等出错问题处理(连接失败,请输入正确的服务器名,SQL Serve ...
- django QuerySet里那些常用又不常见的技巧
QuerySet 像Entry.Objects.all(),这些操作返回的是一个QuerySet对象,这个对象比较特别,并不是执行Objects.all(),或者filter之后就会与数据库交互,具体 ...
- Bagging和Boosting 概念及区别
Bagging和Boosting都是将已有的分类或回归算法通过一定方式组合起来,形成一个性能更加强大的分类器,更准确的说这是一种分类算法的组装方法.即将弱分类器组装成强分类器的方法. 首先介绍Boot ...
- centos6 安装mysql
如果要在Linux上做j2ee开发,首先得搭建好j2ee的开发环境,包括了jdk.tomcat.eclipse的安装(这个在之前的一篇随笔中已经有详细讲解了Linux学习之CentOS(七)--Cen ...
- java_web学习(15)jQuery
JavaScript 库作用及对比 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度 ...
- JDBC-ODBC桥连接方式操纵SQL数据库
/** * 功能:演示使用JDBC-ODBC桥连接方式操纵SQL数据库 * 作者:徐守威 * 操作步骤: * 1.配置数据源 * 2.在程序中连接数据源 * 3.操作数据 */ pack ...
- 使用(Drawable)资源———AnimationDrawable资源
AnimationDrawable代表一个动画. 下面以补间动画为例来介绍如何定义AnimationDrawable资源,定义补间动画的XML资源文件已<set.../>元素作为根元素,该 ...
- mysql 自带的压力测试
注意mysqlslap 是mysql5.1之后新添加的功能,之前的版本是没有此功能的
- [ Android 五种数据存储方式之二 ] —— 文件存储数据
关于文件存储,Activity提供了openFileOutput()方法可以用于把数据输出到文件中,具体的实现过程与在J2SE环境中保存数据到文件中是一样的. 文件可用来存放大量数据,如文本.图片.音 ...
- jenkins用户权限配置错误,导致登录时提示:没有Overall/read权限
jenkins用户权限配置错误,导致登录时提示:没有Overall/read权限 由于初次接触jenkins,于是在搭建好jenkins以后,想要对用户进行管理,于是乎开始在系统管理->conf ...