HTML5的文本语义元素

Published on 2016 - 09 - 14

文本级语义可不是一块好啃的骨头。因为人们产生内容的类型千差万别。如果HTML5为每一种可能的内容类型都发明一个元素,那这门语言中包含的元素可就数不胜数了。问题的复杂性在于,结构化的内容是由很多更小的内容片段构成的,而组织这些内容片段的方式又没有一定之规。比如,要在页面中插入最简单的邮政地址,都可能需要好几个元素,比如<address>、<name>、<street>、<postalcode>、<country>,等等。

HTML5的策略是双管齐下。一方面,它只增强了很少几个文本级语义元素;另一方面,更重要的是,HTML5支持一个独立的微数据标准。这个标准为人们提供了扩展的可能性,任何人都可以定义自己的信息,在自己的页面中为信息添加标注。本文会介绍这两方面的主题。首先,我们来认识三个新的文本级的语义元素:<time>、<output>和<mark>

使用<time>标注日期和时间

网页中经常会出现日期和时间信息。例如,绝大多数博客文章的末尾都有发表时间。然而,人们却一直没有标准的方式来标注日期,因此其他程序(如搜索引擎)也不容易提取这些信息,基本上都是靠猜。好了,现在<time>元素可以解决这个问题。通过它可以标注日期、时间或日期与时间的组合。先看一个例子:

The party starts <time>2012-03-21</time>.

<time>元素在这里要扮演两个角色。首先,它表示日期和时间位于标记中的哪个地方。其次,它以任何软件程序都能理解的方式提供日期和时间。前面的例子符合第二个角色的要求,使用了通用的日期格式,即按年月日这个顺序,年4位数、月和日均为2位数,分隔符为短划线。换句话说,日期的格式如下:

YYYY-MM-DD

不过,对于浏览网页的人,你可以随便采用任何格式来显示日期。实际上,任何文本形式也都是允许的,只要你在datetime属性中提供计算机能看懂的通用格式的日期就行,比如:

The party starts <time datetime="2012-03-21">March 21<sup>st</sup></time>.

在浏览器中的效果如下所示:

The party starts March 21st.

对于时间部分,<time>也有类似的规则,标准的时间格式如下:

HH:MM+00:00

首先是2位数的小时(24小时制),然后是2位数的分钟。随后是一个加号(+),表示时区。时区并不是可有可无的——不知道自己在哪个时区,请参考这里:http://en.wikipedia.org/wiki/Time_zone。例如,纽约是东部时区,表示UTC?05:00。要表示纽约时间下午4:30,应该使用以下标记:

Parties start every night at <time datetime="16:30-5:00">4:30 p.m.</time>.

这样,看你的网页的人,能看到他们想看到的格式,而搜索机器人和其他软件则能看到它们可以处理的值,而且毫无歧义。

最后,通过组合使用两种标准格式,可以指定某个日期的某个时间:日期在前,中间跟一个大写的字母T,时间在后:

The party starts <time datetime="2012-03-21T16:30-5:00">March 21<sup>st</sup>
at 4:30 p.m.</time>.

另外,<time>还有一个pubdate属性。如果当前内容(例如<time>元素所在的<article>)对应一个发表日期,可以使用这个属性。下面就是一个例子:

Published on <time datetime="2011-03-21" pubdate>March 31, 2011</time>.

注意 因为<time>元素纯粹是信息性的,没有任何附加的样式,所以可以在任何浏览器中使用。不必担心兼容性问题。不过,假如你想给<time>元素添加点样式,需要针对Internet Explorer使用进行处理。

使用<output>标注JavaScript返回值

HTML5还包含一个语义元素<output>,它能使某种JavaScript驱动的页面更加清晰。实际上,这个元素就是一个占位符,用于展示一小段计算后的信息。

例如,假设你要创建如图1所示的一个页面。用户可以在这个页面中输入某些信息。然后用脚本取得这些信息,进行计算,并将结果显示在下面。

通常的做法是给占位符指定一个ID属性,这样JavaScript代码就可以在计算时找到它。Web开发人员一般将<span>元素用做占位符,而唯一的问题就是该元素不提供任何语义:

<p>Your BMI: <span id="result"></span></p>

以下则是使用HTML5的更有意义的版本:

<p>Your BMI: <output id="result"></output></p>

实际的JavaScript代码无需任何改变,因为它只根据ID属性查找元素,不考虑元素类型:

var resultElement = document.getElementById("result");

注意 在使用之前,别忘了为Internet Explorer包含相应的脚本。否则,在旧版本的IE中无法通过JavaScript来访问该元素。

通常,这种页面都会采用一个<form>元素。在这个例子中,需要包含3个文本框,以便用户在其中输入信息:

<form action="#" id="bmiCalculator">
  <label for="feet inches">Height:</label>
  <input name="feet"> feet<br>
  <input name="inches"> inches<br>

  <label for="pounds">Weight:</label>
  <input name="pounds"> pounds<br><br>
  ...
</form>

如果你想让自己的<output>元素变得更聪明一些,可以为它添加form和for属性,前者的值是包含相关控件的表单ID,后者的值是以空格分隔的相关控件的ID。比如,下面就是一个例子:

<p>Your BMI: <output id="result" form="bmiCalculator"
for="feet inches pounds"></output></p>

这些属性实际上什么也不干,唯一的用处就是表明<output>从哪些控件获取结果这一信息。不过,你肯定会因为考虑到了语义而获得加分。如果其他人需要编辑你的页面,那这些属性可以帮他们理清思路。

使用<mark>标注突显文本

<mark>元素用于标注一段文本,这段文本会突出显示。在需要引用其他人的内容,而你想引起别人注意时,就可以使用<mark>元素:

<p>In 2009, Facebook made a bold grab to own everyone's content,
<em>forever</em>. This is the text they put in their terms of service:</p>
<blockquote>You hereby grant Facebook an <mark>irrevocable, perpetual,
non-exclusive, transferable, fully paid, worldwide license</mark> (with the
right to sublicense) to <mark>use, copy, publish</mark>, stream, store,
retain, publicly perform or display, transmit, scan, reformat, modify, edit,
frame, translate, excerpt, adapt, create derivative works and distribute
(through multiple tiers), <mark>any user content you post</mark>
...
</blockquote>

如图2所示,浏览器会给<mark>中的文本添加黄色背景。

也可以使用<mark>标注重要的内容或关键字——就像搜索引擎在搜索结果中显示匹配的文本那样,还可以与<del>(删除的文本)和<ins>(插入的文本)组合使用,以标注文档的变化。

实话实说,<mark>元素其实并不十分必要。HTML5规范认为它是一个语义元素,但实际上它更多地则是被用于表现目的。默认情况下,被标注的文本会带有浅黄色背景(见图2),不过当然可以通过样式表规则为它应用不同的样式。

提示 <mark>元素的目的并不在于样式。毕竟,突出显示文本的方式已经有很多了。因此,应该坚持只用<mark>(结合你想使用的任意CSS格式)来传达适当的语义。这里有一条经验,那就是使用<mark>来吸引人注意那些变得很重要的文本。比如,关于写作该文本的讨论,或者它是用户应该执行的任务。

即使你想沿用默认的黄色背景,也应该为不支持HTML5的浏览器添加后备样式表。以下就是相应的样式规则:

mark {
  background-color: yellow;
  color: black;
}

为了让<mark>在Internet Explorer中能够正常获得样式,还应该包含相应的脚本文件。

参考文档