W3C HTML5标准阅读笔记 - sup、sub、i、b、mark、ruby、wbr

标准原文:https://www.w3.org/TR/html5/text-level-semantics.html#the-sub-and-sup-elements

HTML5中,sup与sub标签被用于标记内容的上下标,i标签与b标签用于标记有一定“特殊性”,需要引起用户注意的内容,而mark标签则用于内容高亮。有两种标签平时比较少见 -- ruby标签用于标记有标注的内容,而wbr标签则用于对文本换行进行建议。

sup、sub

sup标签用于标记文本上标(如数学公式中的平方符号X2),sub标签则用于标记文本下标(如数学公式中的变量下标Ix)。可见,sup标签和sub标签在处理、显示数学公式的时候是非常有用的。

i

在HTML4中,i标签作为纯粹的样式标签,用于将某块内容显示为斜体效果;而在HTML5标准中,i标签的意义发生了变化,用于对所包含的内容,标记其特殊性 -- 也即这些内容所传达的意义与其周边内容相比具有较大的差异,比如文章中的分类学词汇、习惯用语、舰艇名称等等。对于这种具体的“特殊性”,一般会在i标签的class属性中加以说明,如<i class="taxonomy">Bacteria</i>

出于向后兼容的考虑,浏览器一般会将i标签里的内容以斜体效果进行显示,但web开发人员还是可以通过CSS来对i标签的样式进行定义,从而让其显示为非斜体效果。

b

在HTML4中,b标签作为纯粹的样式标签,用于将某块内容显示为粗体效果;而在HTML5标准中,b标签的意义与i标签一样,也发生了变化,用于标记需要吸引用户注意,但语义上无需进行任何重要性增强的内容(一个简单的例子,与strong标签相比,当盲人用阅读设备浏览网页时,strong标签中的内容会进行重读,而b标签中的内容则不会),比如文章关键词、产品名称等。需要注意的是,在对内容进行特殊标注这一语义层面上,b标签的优先级应当是最低的,具体情况为:

  1. 对于文章标题,应当使用h1~h6标签。
  2. 对于需要强调的内容,应当使用em标签。
  3. 对于需要标记重要性、紧急性的内容,应当使用strong标签。
  4. 对于需要高亮的内容,应当使用mark标签。
  5. 只有语义上不满足以上4点,但仍需吸引用户注意的内容,方才使用b标签。

与i标签一样,一般会在b标签的class属性中定义需要“吸引”用户的具体原因。在渲染显示上也一样,出于向后兼容的考虑,浏览器一般会将b标签里的内容显示为粗体效果,但web开发人员可以通过写CSS来改变这一点。

mark

mark标签用于对文本进行高亮。在Chrome浏览器中,mark标签里的文本会拥有黄色的背景色。

ruby

ruby标签以及与之搭配使用的rb、rt、rtc、rp一起,可用于标记需要标注的文本 -- 比如,在显示文字的同时,于文字上方显示其相应的拼音。

wbr

wbr标签(week br?)与br标签比较像,用于标记文本的换行。与br标签直接渲染为换行符不同的是,如果wbr标签所在的文本宽度足够,无需换行,那么wbr标签不会产生任何效果;而如果wbr标签所在的文本宽度有限,需要换行,那么这一文本换行操作将优先发生于wbr标签处。比如,对于以下的文本:

The path is: /Users/test/Programs/tomcat/webapps/example  

如果文本所在外部容器的宽度有限,需要换行,由于具体路径(/Users/.../example)中没有任何空格,因此这一换行将发生在/Users开头处,也即整个路径文本都会移到下一行,从而给"...path is:"后面留下大块的空白。

为了解决这一问题,可以在路径分隔符(/)前面添加wbr标签:

The path is: /Users<wbr>/test<wbr>/Programs<wbr>/tomcat<wbr>/webapps<wbr>/example  

此时,如果文本所在的宽度有限,需要换行,那么这一换行操作将优先发生在路径分隔符(/)之前,也即wbr标签所在处。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!