了解 HTML5 语义 -- 第一部分

吗？ 这就是这些新元素的出处。 数百万（甚至数十亿）web 页面像蛛网一样交织在一起，并且相应的公共类名称汇集在一起。 你可以想象，在第无数次看到"div class=header"之后，作为一个分析师，你一定知道你正在做有重要意义的事情。

事实上，上述列出的类和 ID 是三个最著名的元素—header，nav，footer。 并且它们对我们大部分人来说非常重要。 它变得更加难以处理的地方是添加 article，section，并且 aside 究竟是什么？ 更为重要的是，它们应该位于页面的什么位置？ 我将不会在本文中对它们全部进行讨论，但会讨论在 HTML5 中引入的一些新元素（请记住仍然有几个元素在弹入和弹出下表）：

article

aside

audio

canvas

command

datalist

details

embed

figcaption

figure

footer

header

hgroup

keygen

mark

meter

nav

output

progress

rp

rt

ruby

section

source

summary

time

video

wbr

当你收到一个网站的内容时，你首先遇到的挑战之一是确定哪些新元素适于使用以及它们应该放置于什么位置（参见图 1）。

图 1. 首先你需要确定你希望使用的元素

大多数页面均在顶部有一个页眉、在底部有页脚、也许在页面下面（或里面）或在一个边栏中有一个导航条。 但以这些术语进行思考的确带有 HTML4/XHTML 的色彩。 换句话说，HTML5 工作组能够与新元素本身一起，根据内容的质量为我们的页面内容标价。 你不应该根据内容在页面上的"位置"而是以该内容与其它页面的关系进行思考。 此外，更进一步地，什么是页面和区段等的内容角色的特定部分？

这些元素能够相互之间嵌套。 事实上，一个页眉可能发现自己位于一个导航条中，或一个页脚可能发现自己位于一个条目中。 但在你的大脑变成一个标记曲解者（markup contortionist）之前，让我们讨论一下这些元素本身。 新元素中的 4 个元素被称为分节元素（sectioning elements）。 这些元素更像新的乐高（Lego）积木块，它们可以通过你当前使用的 divs（并且你绝对会继续使用 divs）嵌入。 它们是 article、aside、nav 和 section。

大纲

这些分节元素能够为你的页面创建大纲。 在 HTML4/XHTML 中，通过我们标记的标题级别可以隐含地创建相应的大纲。 Divs 对页面的大纲无效。 相应的结果有点类似毕业或研究论文的大纲。 Wikipedia 能够为每篇文章显示一个大纲 — 是的，它也是基于相应的标题级别（参见图 2）。 每篇文章以 H1 级别开始，然后进入顶级 H2 标题，其中带有嵌套的 H3、H4 等标题。 相应的结果是一个他们放置于用作导航的页面的隐含大纲。 合理地使用标题对使用辅助技术的开发人员来说帮助很大，因为他们能够请求你的一列标题然后跳转到页面上的逻辑位置。

图 2. Wikipedia 能够为每篇文章显示一个大纲以便于导航

利用 HTML5 能够显式地创建大纲。 你可以使用分节元素（sectioning elements）而不是标题来为我们的文档创建章节。 这些元素能够正确地创建文档的目录，而不论它起始于什么标题级别。分节元素能够起始于 H1，但不论一个章节起始于什么标题级别，相应的层级均从这里递减。

使用一个 H1 级别开始每个分节元素是完全可以接受的方式。 它允许提供具有逻辑的组织架构，这样能够从一个 CMS 中拉出代码程序块并且能够在保持其语义结构的同时将其用于网站的任何位置。 然而，目前—尽管辅助技术能够补偿这一缺陷—但最好针对章节的嵌套级别使用合适级别的元素。 这意味着—利用分节元素创建大纲，但目前应该继续使用 H1、H2 和 H3 层级开始这些章节。 如果你内容的某个部分没有开始大纲的一个新部分，你应该针对它使用一个 div。

分节元素

4 个新分节元素的第一个也是最普通的元素是section。 一个 section 表示文档或应用程序的一个普通章节。 依据相应的 HTML5 文档 * :

"一个 section, 在文章中，是一个具有主题分类的内容，通常拥有一个标题。

Section 的范例包括章（chapter）、位于带标记符的对话框中的各种带标记符的页面（page），或一篇论文中的带标号的节（section）。 一个 Web 网站的主页能够划分为引言、新闻条目和联系信息等 section。"

记住，当一个元素仅仅用于提供式样目的或用于方便提供脚本，则仍然应该使用一个 div。 Section 元素并不是那么通用。 它可以为你的页面定义一个部分，该部分应该为页面的大纲创建一个新节。

如上所述，一个网站的主页—为了吸引用户进入网站中内容的各个不同部分—是一个能够发现多个 section 元素的常去公共之地。 信息页面可能也会在其中包含多个 section。 因此，相应的代码能够按照下面的方式进行添加：

<article>
<hgroup>
 <h1>British Virgin Islands</h1>

 <h2>A bareboat charter wonderland!</h2>
</hgroup>
<p>Want to go sailing on your vacation? 
Among these Caribbean jewels, 
there are options for both beginners 
and experienced charterers…</p>
<section>
 <h1>Virgin Gorda</h1>

 <p>The Baths at Virgin Gorda are truly 
 one of the most picturesque places in the Caribbean.<p>
</section>
<section>
 <h1>Norman Island</h1>
 <p>Whether it's snorkeling at the Indians 
 or drinks and night life at Willy T's floating restaurant, 
 the Bight on Norman 
 Island gives you 
 a full range of choices…</p>

</section>
<section>
 <h1>Jost Van Dyke</h1>
 <p>This small island contains 
 several great evening activities 
 including the Soggy Dollar Bar and Sidney's Restaurant…</p>
</section>

</article>

关于 article 元素的使用，网站上存在很多争论。 起初，对某些人来说，该 规范 * 该规范显得有些模糊和混淆。 随着以后的进一步澄清，该元素已经被定义为：

“一个 article 元素表示包含于一个文档、页面、应用程序或网站中的一篇独立的作文，也就是说，它能够独立地发布或重新使用，例如通过供稿联合组织在报刊上同时发表新闻文章（in syndication）。 它可以是一个论坛帖子、一篇杂志或报纸文章、一个博客条目、一个用户提交的评论、一个互动 widget 或 gadget、或任何其它独立内容条目。”

混淆部分起源于术语article本身的使用，因为通常它是你在杂志、报纸或博客中看到的一种写作形式。 但，请不要为"in syndication" bit 而困惑。 这并不意味着 article 元素仅仅适用于博客帖子或实际上通过供稿联合组织在报刊上同时发表新闻文章。 它意味着这一内容文章在需要时能够独立提供，并且你可以拥有你需要了解它是什么类型文章以及它来自何处的所有信息。

article的字典定义之一是 “一个类的一个单独的物体、成员或部分；一个条目或特别的：一种食物；衣物。” 因此，将你的思考方式从出版界的 article 用法改变为对"完整物体" 或条目的更为简单的理解是提供一些明确性的第一步。

当然，现在让我们将一个博客帖子作为一个范例。 我不会试图在你的脑海中混淆我刚刚表述的观点，但有一些其它观点适用于本范例，当然—article 元素适用于博客帖子。 记住上述的规范提及到 "用户提交的评论"也是一个 article。 关于以这一方式添加一个评论的合法性已经引起很多争论。 但作为一个 article 添加的评论必须嵌套到其原先的文章中。 它不会放置于它评论的文章的结束标记符之后。 因此，它在语义上被看作一个与放置它的原先条目相关的条目。 然而，一个评论通常是独立的。 它具有发布它的相关人员的辨别信息—姓名甚至还有头像；时间 / 日期戳；以及所有的评论。 它是独立的并且可以通过什么人在什么时间编写它等信息对它进行识别。

<article>
<header>
 <h1>Anchoring isn't for beginners</h1>

 <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If you've ever chartered a 45ft catamaran, you know that mooring balls are your friends. They protect the coral and sea bottom from the constant abuse of frequently anchoring boats.</p>
<p>...</p>

<section>
 <h1>Comments</h1>
 <article>
  <footer>
   <p>Posted by: Peg Leg Patooty</p>

   <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
  </footer>
  <p>Right! Mooring balls are for wusses! Pirates only use anchors! Arrrrr!</p>
 </article>

 <article>
  <footer>
   <p>Posted by: Ariel</p>
   <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>

  </footer>
  <p>Thank you for thinking of what's under the sea. Even Ursula would be thrilled.</p>
 </article>
</section>
</article>

注意博客帖子 (父 article) 和评论 (子 article) 均可以通过新的time元素进行添加。 依据相应的规范：

“该元素的目的是用作一种方法通过一种机器可读的方式将现代的日期和时间进行编码，以便用户代理能够提供将生日提示信息或计划的事件添加到用户的日历中的解决方案。”

请注意术语机器可读（machine-readable）。 对于添加数据操作，它正变得越来越有用，这样机器能够对他进行解析并且能够在你自己的程序中自动使用这些数据或为各种应用创建糅合（mashup）解决方案。 这是为什么说语义是重要的一个原因。 当机器了解数据的含义—并且这将包含搜索引擎—该数据将变得更为丰富和可操作。

你也许还注意到 time 元素中的 Boolean 属性 pubdate。 依据相应的 规范 * ，该属性 “表示元素给出的日期和时间是最亲近的祖辈 article 元素的发布日期和时间，或者，如果元素没有祖辈 article 元素，则是作为一个整体的文档的发布日期和时间。”

换句话说，该属性为解析你的数据的机器指明该 time 元素是评论或文章的实际发布日期。 如果你在你的页面的全局页脚的 time 元素中使用 pubdate，这将表明它是该 web 页面自己的发布日期和时间。

在最后两个分节元素之上 …

第三个分节元素与 你的网站和其页面的导航 * 有关：

“nav 元素表示链接到其它页面或页面中其它部分的一个页面的一个区段：一个具有导航链接的区段。 . . . 该元素主要用于由主导航程序块组成的区段。”

在现代 web 标记语言中，为到网站的主要区域提供一组链接（也许通过下拉菜单选择）、在网站的一个区段内提供一组链接、以及在页面分成多页的情形下提供通过一些分页技术帮助你导航的一组链接是非常通行的作法。 你也可以拥有到你推荐的其它网站的一组链接（blogroll）、针对特定主题的一组资源链接以及在你的页面的页脚重复顶层的链接（这样用户能够避免滚动返回到页面的顶部以选择他们的下一个目的地）。

第一个需要考虑的集合是"主导航"组。 它们均是用户需要在整个网站或网站的一个区段中进行导航的链接组。 它们是在你希望导航到别的页面时你希望用户使用辅助技术能够直接跳过（以便先看到相关的内容）或直接跳到的组。

在决定将它们标记为"主导航"之前，必须小心地考虑第二个组。 任何离开你的网站的链接组应该不能标记为 nav—它取决于这些链接的目的。 如果它是一组用于为你的公司注册事件的链接，并且它们均链接到 Eventbrite，那么我将它们认作与你的网站相关的导航。 但你希望建议作为他们也喜欢的一些事情（如 blogroll）的许多链接可能不是如此。没有必要将位于页脚的你的网站导航的一些副本标记为 nav 元素。 但这也不是错误的操作。

你应该知道 nav 元素能够包含各种式样的导航—而不仅仅包含无序的列表。 尽管无序的列表或 P 元素一定是最常见的内容，但你也可以将你的导航编写为一段诗词或散文。 只要元素的目的是用于用户进行导航，这是完全能够接受的。

这是来自 Ian Hickson* （WHATWG 的主席）自己的引言：“不要使用