Dive Into HTML5:它的含义是什么?(续五)

日期和时间

很激动人心,是不是?我是说,不是那种“一边从珠穆朗玛峰顶上滑下来,一边倒背《星条旗》”的激动。这种激动是因为增加了很多急需的功能。那么,我们继续下面的内容。

这次我们要说的是下面的<p class="post-date">October 22, 2009</p>

<div class="entry">
  <p class="post-date">October 22, 2009</p>
  <h2>Travel day</h2>
</div>

还是一个老问题,对吧?以往对文章发布日期的解决方案就是这样,没有有语义的标签,所以我们只能使用一个通用的标签,加上一个自定义的类名。当然,这在 HTML5 中也是可行的,你不需要非得改变它。但是 HTML5 提供了专门的解决方案:<time>标签。

<time datetime="2009-10-22" pubdate>October 22, 2009</time>

<time>标签有三个部分:

  1. 机器可读的时间戳;
  2. 人类可读的内容;
  3. 可选的 pubdate 标记。

在这个例子中,datetime 属性仅仅指定日期,没有时间。它的格式是四位的年,两位的月份和两位的日期,使用短线分隔。如果你要加入时间,那么就在日期后面增加一个大写的 T,然后写上 24 小时制的时间,最后是时区:

<time datetime="2009-10-22T13:59:47-04:00" pubdate>
  October 22, 2009 1:59pm EDT
</time>

(日期/时间的格式很灵活,HTML5 也提供了很多种合法的格式信息。)

注意,我改变了文本内容——也就是在<time></time>之间的部分——来匹配机读时间戳。这实际上不是必须的。文本内容可以是你需要的任何信息,只要你在datetime属性里面提供了机读时间戳。所以,下面的代码在 HTML5 中也是合法的:

<time datetime="2009-10-22">last Thursday</time>

另外,空的文本内容也是可以的:

<time datetime="2009-10-22"></time>

最后是关于pubdate。这个属性是一个 Boolean 值,所以你可以这么用:

<time datetime="2009-10-22" pubdate>October 22, 2009</time>

如果你不喜欢这种没有值的属性,也可以这么写:

<time datetime="2009-10-22" pubdate="pubdate">October 22, 2009</time>

这个属性什么意思?它的含义有两个。如果<time><article>标签内,意味着这个时间戳是这篇文章的发表日期;如果<time>不在<article>内,意味着这个时间戳是整篇文档的发表日期。

下面就是我们前面所说的这篇文章的完整 HTML5 版本的代码:

<article>
  <header>
    <time datetime="2009-10-22" pubdate>
      October 22, 2009
    </time>
    <h1>
      <a href="#"
         rel="bookmark"
         title="link to this post">
         Travel day
      </a>
    </h1>
  </header>
  <p>Lorem ipsum dolor sit amet…</p>
</article>

导航

任何 web 站点的最重要的部分之一就是导航条。CNN.com 在每个页面顶部有一个“标签页”,用于链接到不同的新闻版块,比如“技术”、“健康”、“体育”等等。Google 搜索结果页面有一个类似的东西,可以让你选择 Google 的其他服务——“图像”、“视频”、“地图”等。我们这个例子也有一个导航条,可以让你访问站点的其他页面——“主页”、“博客”、“相册”和“关于”。下面是我们的导航条的代码:

<div id="nav">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</div>

当然,这在 HTML5 中同样适用。这段代码标记出四个导航项,并且没有什么标签告诉你,这是我们页面的导航。显然,你可以猜测,这其实是页面头的一部分,因为你可以阅读这些链接的信息。但是注意,对于浏览器而言,它可不知道这样的导航同其他链接有什么区别。

谁会关心站点导航的语义?第一,残疾人。为什么呢?想象一下,你的行动受到限制,不能很好的使用鼠标。为了上网,你可以使用一个浏览器插件,让它帮助你跳转到页面的主导航。再想象另外的情景:如果你是一个盲人,你可以使用一个叫做“屏幕阅读器”这么个程序,让它帮你一行行读出页面内容。一旦你读到页面标题,下一个重要的信息大概就是整个站点的主导航。如果你要快速导航,可以告诉屏幕阅读器跳转到导航条,然后开始阅读导航条的内容;如果你要快速浏览,则告诉它跳过导航,直接读内容。不管如何,正确识别出导航都是很重要的。

尽管使用<div id="nav">来标记站点导航没什么错误,但它也没有什么好处。HTML5 提供了关于导航的更有语义的标签:<nav>

<nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</nav>

FAQ

Q: 跳过链接与<nav>标签兼容吗?我还要更改链接吗?

A: 跳过链接允许读者跳过导航部分。它们对于使用第三方软件阅读页面的残疾人是非常有用的。(学习为什么和如何使用跳过链接

一旦屏幕阅读器正确识别出<nav>标签,这种跳过链接就会过时。因为屏幕阅读器可以自己提供跳过<nav>这么一种功能。但是,对于目前来说,让所有残疾人使用上支持 HTML5 的屏幕阅读器还是有些困难,所以你还是得为<nav>标签继续提供跳过链接。

脚注

终于,我们来到页面的最后一部分,也就是脚注。通常,我们会这么去写脚注:

<div id="footer">
  <p>§</p>
  <p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</div>

同样,HTML5 也支持这种写法。但它提供了另外更有语义的标签<footer>

<footer>
  <p>§</p>
  <p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</footer>

把什么放进<footer>里面好呢?你可以把所有<div id="footer">里面的东西都放到<footer>。这是最简单的回答,事实也的确如此。HTML5 标准说,“脚注包含了这个块的作者信息、相关文档、版权数据,等等诸如此类的东西。”这就是我们在这个例子中显示的:一个简短的版权声明,一个到关于作者页面的链接。看看现在很多网站,你就有了放什么进去的思路。

CNN 的脚注里面放了版权信息、翻译页面、服务条款、隐私保护条款、“关于我们”、“联系我们”和“帮助”页面。这些都是符合<footer>精神的。Google 的主页很简洁,但是最下方也提供了“广告程序”、“商业解决方案”、“关于 Google”、版权信息和隐私条例这样的链接。所有这些都是在<footer>中。(注意,这些链接不应该在<nav>中,因为它们不是站点导航,仅仅是我们站点的一些有用的链接的集合。)“富脚注”现在也变得流行起来。看看 W3C 的脚注,它包含了三栏:“导航”、“联系 W3C”和“W3C 更新”。这种代码类似这样:

<div id="w3c_footer">
  <div class="w3c_footer-nav">
    <h3>Navigation</h3>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>Contact W3C</h3>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>W3C Updates</h3>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </div>
  <p class="copyright">Copyright ? 2009 W3C</p>
</div>

为将它转换成 HTML5 的格式,我们需要做如下处理:

  • <div id="w3c_footer">换成<footer>
  • 将前两个<div>换成<nav>,第三个换成<section>
  • <h3>换成<h1>,因为他们每个都是在一个独立的块级元素中。事实上,<nav>会在文档大纲中创建一个块,就像<article>那样。

经过我们修改过的代码应该是这样的:

<footer>
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
    </ul>
  </nav>
  <nav>
    <h1>Contact W3C</h1>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
    </ul>
  </nav>
  <section>
    <h1>W3C Updates</h1>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </section>
  <p class="copyright">Copyright ? 2009 W3C</p>
</footer>

3 Comments

  1. 考考拉 2012年3月11日
    • DevBean 2012年3月11日
      • 考考拉 2012年3月12日

Leave a Reply