语义化HTML:i、b、em和strong标签

时间:2022-04-29 16:10:26

一、前言                          

在HTML4.1中i和b作为表象标签分别表示斜体和粗体样式,而强调样式与内容分离的XHTML中则出现样式效果相同的em和strong表义标签,此时我们会建议避免使用i和b标签,应该改用em和strong标签。

但在HTML5对i和b赋予新的语义,本文将再一次认识它们!

二、元素语义                        

  1. i标签

W3C草案:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized).W3C specification

语义化的 <i>元素 可以用来表示:外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。建议通过class特性标识具体语义,若为表示外文单词则采用lang特性标识具体的语言种类。示例:

滑板介绍

  滑板的基本动作名为豚跳(ollie)

<h3>滑板介绍</h3>
<p>
滑板的基本动作名为<i class="skateboard">豚跳</i>(<i lang="en_us">ollie</i>)
</p>

 2. b标签

W3C草案:

The <b> element represents a span of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.

W3C specification

语义化的 <b>元素 用于表示:局部范围内不重要但需要突出的内容,如概要中的关键字、评论中的名词等。建议通过class特性标识具体语义。示例:

滑板构造概要

滑板由*板面磨砂纸支架(truck)组成。

<h3>滑板构造概要</h3>
<p>
滑板由<b class="compent">*</b>、<b class="component">板面</b>、<b class="component">磨砂纸</b>和<b class="component">支架</b>(<i lang="en_us>"truck</i>)组成。
</p>

  3. em标签

W3C草案:

The em element represents a span of text with emphatic stress.

W3C specification

语义化的 <em>元素 表示:局部范围内强调的内容,用于改变句子或段落的侧重点。注意其作用范围为局部,也就是阅读到某段落或句子时才会注意到。示例:

ollie教学

后脚踏板的同时前脚提起,并向斜前方跳起。

后脚踏板的同时前脚提起,并向斜前方跳起

第一句强调 前脚提起,第二句强调 向斜前方跳起。

  4. strong标签

W3C草案:

The strong element represents a span of text with strong importance.

W3C specification

语义化的<strong>元素表示:全部范围内强调的内容,随意无序扫描全文时能突出的关键内容。

三、总结                          

理解语义化HTML确实不易啊,继续努力吧!

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4172771.html ^_^肥仔John

四、参考                          

http://www.zhangxinxu.com/wordpress/2011/11/i-b-em-strong-html5-%E8%AF%AD%E4%B9%89/

http://www.blueidea.com/tech/web/2008/6342.asp

http://www.lixuepeng.com/post/1906.html