如果你的业务与我相似，则你最近肯定已经听到大量关于HTML5的新闻。 大家都在谈论"Flash killing" 视频元素、带有画布的动画及定位功能（geolocation）等话题。 事实上，围绕HTML5的讨论已经扩展到包括许多根本不是HTML5 的话题。 在整个web上，人们都在讨论CSS3的富于表现的新功能，而同时将它们称作HTML5。 而在HTML5的势不可挡的营销噪音中，常常遗忘的是引入的新元素和其它语义的改变。 在本文中，我希望帮助你了解和学习如何恰当地使用这些虽然未必是令人兴奋的，但绝对是非常重要的新语义元素。 尽管这一主题可能显得枯燥乏味，但实际上通过恰当地使用这些新元素你可以将新的丰富含义添加到你的markup中。
分节思考
我们究竟为什么引入新元素？ 我们需要它们吗？ 它们来自何处？
考虑一下你的代码。 你曾经使用过 <div id="nav">、<div class="header">或 <div id="footer"> 吗？ 这就是这些新元素的出处。 数百万（甚至数十亿）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中，通过我们标记的标题级别可以隐含地创建相应的大纲。 Divs对页面的大纲无效。 相应的结果有点类似毕业或研究论文的大纲。 Wikipedia 能够为每篇文章显示一个大纲 — 是的，它也是基于相应的标题级别（参见图2）。 每篇文章以 H1级别开始，然后进入顶级 H2标题，其中带有嵌套的H3、H4等标题。 相应的结果是一个他们放置于用作导航的页面的隐含大纲。 合理地使用标题对使用辅助技术的开发人员来说帮助很大，因为他们能够请求你的一列标题然后跳转到页面上的逻辑位置。
图2. Wikipedia 能够为每篇文章显示一个大纲以便于导航
利用HTML5能够显式地创建大纲。 你可以使用分节元素 （sectioning elements）而不是标题来为我们的文档创建章节。 这些元素能够正确地创建文档的目录，而不论它起始于什么标题级别。分节元素 能够 起始于 H1，但不论一个章节起始于什么标题级别，相应的层级均从这里递减。
使用一个H1级别开始每个分节元素是完全可以接受的方式。 它允许提供具有逻辑的组织架构，这样能够从一个CMS中拉出代码程序块并且能够在保持其语义结构的同时将其用于网站的任何位置。 然而，目前—尽管辅助技术能够补偿这一缺陷—但最好针对章节的嵌套级别使用合适级别的元素。 这意味着—利用分节元素创建大纲，但目前应该继续使用H1、H2和H3层级开始这些章节。 如果你内容的某个部分没有开始大纲的一个新部分，你应该针对它使用一个div。
分节元素
<section>
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 元素的使用，网站上存在很多争论。 起初，对某些人来说，该 规范 该规范显得有些模糊和混淆。 随着以后的进一步澄清，该元素已经被定义为：
"一个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>
第三个分节元素与 你的网站和其页面的导航有关：
"nav 元素表示链接到其它页面或页面中其它部分的一个页面的一个区段：一个具有导航链接的区段。 . . . 该元素主要用于由主导航程序块组成的区段。"
在现代web标记语言中，为到网站的主要区域提供一组链接（也许通过下拉菜单选择）、在网站的一个区段内提供一组链接、以及在页面分成多页的情形下提供通过一些分页技术帮助你导航的一组链接是非常通行的作法。 你也可以拥有到你推荐的其它网站的一组链接（blogroll）、针对特定主题的一组资源链接以及在你的页面的页脚重复顶层的链接（这样用户能够避免滚动返回到页面的顶部以选择他们的下一个目的地）。
第一个需要考虑的集合是“主导航”组。 它们均是用户需要在整个网站或网站的一个区段中进行导航的链接组。 它们是在你希望导航到别的页面时你希望用户使用辅助技术能够直接跳过（以便先看到相关的内容）或直接跳到的组。
在决定将它们标记为“主导航”之前，必须小心地考虑第二个组。 任何离开你的网站的链接组应该不能标记为nav—它取决于这些链接的目的。 如果它是一组用于为你的公司注册事件的链接，并且它们均链接到Eventbrite，那么我将它们认作与你的网站相关的导航。 但你希望建议作为他们也喜欢的一些事情（如blogroll）的许多链接可能不是如此。没有必要将位于页脚的你的网站导航的一些副本标记为 nav 元素。 但这也不是错误的操作。
你应该知道 nav 元素能够包含各种式样的导航—而不仅仅包含无序的列表。 尽管无序的列表或P 元素一定是最常见的内容，但你也可以将你的导航编写为一段诗词或散文。 只要元素的目的是用于用户进行导航，这是完全能够接受的。
这是来自 Ian Hickson （WHATWG的主席）自己的引言："不要使用 <nav> ，除非你认为 带有 <h1>Navigation</h1> 的<section> 也是合适的。"
<aside>
最终，我们将讨论最后一个分界元素— aside。 很明显，这一元素的名称源自人们称呼为sidebar、aside或 sidepanel的页面的区段。 这些单词的 "side" 部分实际上表示它在页面中的视觉上的位置。 但aside并不意味着反映这一意图。 下面是相关 规范 的描述：
"aside元素表示由与围绕该aside元素的内容几乎没有相关性（tangentially related）的内容组成的页面的一个区段，并且可以认为它与该内容是独立的。 通常利用打印的印刷体将这些区段表示为sidebar。
该元素可以用于像提升引语（pull quote）或 sidebar等印刷效果、广告、nav 元素组和被认为与页面的主要内容分离的其它内容。"
什么是几乎没有相关性（Tangentially related）？ 其含义是有一点相关性。 在决定内容是否应该标记为aside时，首先问问你自己下面几个问题：能够认为它与该内容是分离的吗？ 你可以删除它而不会影响文档或章节的含义吗？
尽管你一定能够使用它保存大量导航和广告链接—无论它们是不是位于页面的侧面—但你也能够在与它相关的章节或文章中直接使用它。 例如，一段杂志式样的提升引语（pull quote） 能够按照下列方式进行标记：
<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. They're also one of the easiest ways to secure yourself while at sea avoiding the dreaded "anchor watch" that can keep you awake half the night.</p>
<aside>
<q>Mooring balls protect the coral and sea bottom from constant abuse…</q>
</aside>
<p>Learning mooring techniques isn't overly difficult. Communication is key between the person grabbing the ball with the hook and the sailor at the helm.</p>可以删除提升引语（pull quote ）而不会破坏文章的内容，因为它仅仅利用特殊的印刷体重复来自该文章的引语。 你不应该在应该保留在该文章中的插入句中使用aside元素。 如果在删除时影响文章（或章节）的内容，它可能不是一个aside元素。
记住，如果遇！ 它们被创建的目的是为我们提供比使用一个div元素更易于描述我们内容的新元素。 尽量保持合理的思维方式并且关注相应的目的。 在标记你的网站时，不要看链接将去向哪里 到所有这些新的分节元素—别紧张，而是看它们是什么以及它们的相互关系如何。 然后，任它而去…
相关元素
还有一些与我刚刚讨论的元素紧密相关的元素，但它们不会创建一节新的大纲。 其中最重要的两个是 header 和footer。
<header>
尽管 header 元素在页面的顶部能够找到自己，但它实际上是在页面中标识内容重要性的一个元素。 （不能将<header> 与你的文档的 <head> 或 heading 元素— h1 ，h2 ， h3 ，等等相混淆）相关规范的描述如下：
"header表示一组导言或导航帮助。
header元素通常会包含章节的标题（ h1–h6 元素或 hgroup 元素），但这不是必需的。 header 元素还能够用于包含章节的目录、搜寻表单或任何相关的徽标。"
在一个页面中可以允许使用一个以上的header 元素。 通常你的页面需要一个全局header元素，但你也可能在分节元素中需要使用一个header元素。 请记住，尽管分节元素总包含一个标题元素，但它可能仅仅是 h1 – h6 的其中之一 ，很可能包含于一个 hgroup 元素中的合适位置。
<hgroup>
有一个名称为hgroup的新元素已经在规范中多次进出。 目前，它结束的位置仍然有待明确，但 hgroup元素的创建目的是在存在两个前后紧跟的标题的情形下成为一个 wrapper (或shield) ，并且只有第一个标题能够包含于文档显式大纲中。 考虑一个网站名称和标签线：
<hgroup>
<h1>The British Virgin Islands</h1>
<h2>Jewels in the Caribbean</h2>
</hgroup>在该文档的大纲中， h1 元素能够显示出来，但 h2 将被大纲屏蔽。
<footer>
与 header 相同，你可以在一个页面中拥有一个以上footer。 你可以拥有一个全局footer，但分节元素也能够拥有多个footer。 相关的 规范 给出如下的描述：
" footer 元素表示其最亲近的祖辈分节内容或分节root元素的一个页脚。 Footer通常包含关于其区段（section）的信息，例如谁是作者、到相关文档的链接、版权数据、等等。
当 footer元素包含全部区段（ section）时，它们表示附录（appendixes）、索引（ indexes）、 冗长的版本记录（colophons）、详细的许可协议（license agreements）和其它类似的内容）。"
当你对一个博客帖子进行标记时，你需要在该帖子的底部和顶部添加谁是作者和编写日期等信息。 如果你希望将这些信息放置于页脚，这样做显然是合理的，则你可以使用一个 footer 元素。 你将不会把信息放置于顶部的一个 header 元素中以及底部的一个页脚中。 它是相同的信息，因此如果它是复制的信息，则应该包含于相同的元素中。
<address>
尽管 address 不是新的元素，但我仍然希望提及它，因为它很可能更多地与新的语义元素一起使用。 请不要感到困惑。 address 元素不涉及你的家庭、办公室或商务邮政地址。 它实际上具有 如下的描述：
"address 元素表示其最近的 article 或body元素祖辈的联系信息。 如果它是body元素，则该联系信息能够应用于整个文档。"
这说明它通常是作者的电子邮件地址或到一个web页面的链接。 通常它放置于页脚中。 如果它放置于全局页脚，则它与整个页面相关。 如果它放置于一篇文章的页脚，则它只与相应的文章相关。 只有在邮政地址实际上是相应文章的联系信息的情形下，才使用邮政地址。
<figure> 和 <figcaption>
我们将要讨论的最后一个元素是 figure 元素：
"… 该元素能够随意添加图片说明，它是独立的并且通常能够从文档的主流中被引用为一个单一单元。
因此该元素能够用于注解插图（illustration）、示意图（diagram）、图片（photo）、代码列表（code listing）、等等，它们能够从文档的主内容进行引用，但在不影响文档流的情形下，它们能够从主内容中移植到页面的旁边、专用的页面或附录等位置。"
人们所犯的错误是相信他们的图像应该全部包含于 figure 元素中。 实际上，figure 元素应该被想象为一本书中的插图。 它可能是或不是一张照片。 并且它可能有或没有图片说明—这取决于它在内容流中的位置。 它可以是用于一个代码范例或web中教程的插图的完美合理的使用方法。
627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
