本节书摘来自异步社区《HTML5多媒体应用开发》一书中的第1章，第1.3节,作者： 【爱】Ian Devlin 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.3 主要的HTML5结构化元素
本书讨论的任何HTML5多媒体元素和API自然都需要编写HTML标记。你当然可以使用HTML 4.01标记（但是你必须使用本小节提到的HTML5 DOCTYPE元素），但是因为本书是关于HTML5多媒体的，对你来说使用HTML5标记更有意义。本书和网站上的所有例子都使用HTML5标记。
下面，让我们从组成HTML5文档的主要结构化元素的简单介绍开始。
1.3.1 DOCTYPE和Charset
和任何HTML文档一样，你必须用一个DOCTYPE作为HTML5文档的开始。DOCTYPE告诉浏览器网页所使用的HTML版本，浏览器可以用它来决定页面的显示方法。HTML5 DOCTYPE的杰出之处在于简洁性。
使用HTML 4.01，你可能这么写：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd“>
而使用HTML5，你可以这么写：
<!DOCTYPE html>
是的，仅此而已。
这个新的DOCTYPE是最短的有效字符串，使浏览器以你所想要的标准模式显示文档，而不是你绝对不想要的怪异模式（Quirk mode），更多细节参看补充材料“标准模式VS. 怪异模式”。
标准模式VS. 怪异模式
现代浏览器可以使用两种不同的模式来解释Web文档的CSS：标准模式和怪异模式。
标准模式导致浏览器根据规范显示CSS，这是正确的，你应该希望采用这种方式。
另一方面，怪异模式导致浏览器根据旧的非规范原则显示CSS。这种模式的存在是为了向后兼容性，因为老的版本无法根据规范显示CSS。
目前标准模式是你希望使用的，因为大部分情况下你所使用的旧版浏览器是IE6，它不需要怪异模式就能正常工作（但是可能需要一些IE6专用的CSS）。
有趣的是，IE6～IE8版本在显示怪异模式的页面时和IE5.5所做的一样。你绝对不希望如此，因为显示的结果是不可预测的。
提供文档的字符编码（通常是UTF-8）也是有益的好主意。在HTML5标记中指定字符编码也被大大简化了。
在HTML 4.01中，字符串通过如下代码进行设置：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
在HTML5中，你使用如下的代码：
<meta charset="utf-8">
和DOCTYPE一样，这个字符编码串包含了需要为Web浏览器解释的最少字符。实际上，你可以通过删除引号再减少两个字符，但是我个人的选择是包含引号。而且，我没有关闭这个元素，关闭元素同样没有必要，但是如果我希望关闭，也可以这么做，HTML5没有那么严格。
提示：
指定字符集还能够预防IE7中的跨站脚本攻击漏洞。
命名新的HTML5元素
包含在HTML5规范中的有些新元素并不是随机选择的。2004年，HTML5规范的编写者Google公司的Ian Hickson在超过10亿个网页的Google索引上进行了数据挖掘，以获得对Web文档内容实际组成的更好了解。他发表了许多分析报告，其中之一指出了用于HTML元素的最流行CSS类名。你可以在http://code.google.com/webstats/2005-12/classes. html上读到这篇分析。如表1.1所示，列出了前10位的CSS类名和对应的HTML5元素。
尽管表1.1没有覆盖所有新添加的HTML5元素，但是它确实为你指出了新HTML元素命名的思路，以及它们所表达的语义。
1.3.2 and
几乎每个HTML文档都有标题和脚注。HTML5规范承认这一事实并包含两个专用元素，你可以用来从语义上指定标题和脚注。但是，每个文档并没有限制只能有一个这种元素，这些元素也可以用在指定文档的特定section或者article元素中的标题和脚注区域。
header元素通常包含至少一个h元素：
<header>
<h1>The header element</h1>
<span class="subtitle">A quick guide</span>
</header>
footer元素的使用非常简单，不需要多作说明：
<footer>
<small>Copyright © 2011</small>
</footer>
heaser元素不一定必须出现在Web文档的最开始，同样footer元素也不一定出现在文档最后。实际上你可以根据需要将它们放在任何地方。不过，将它们放在开始和最后通常是有意义的，这样可以使文档源代码更容易阅读。
**
1.3.3 **
如果标题包含许多分组的h元素，它们可以包含在一个hgroup元素中，如：
<header>
<hgroup>
<h1>The header element</h1>
<h2>A quick guide</h2>
</hgroup>
<a href="home.html">Home</a>
</header>
注意，hgroup元素只能包含h元素，不能包含其他内容。
关于hgroup的争论
hgroup元素在本书编写时还是有争议的，因为它曾经从HTML5规范中被删除，而在前几个月中又被重新写入。人们正在努力再次删除它，或者用其他更有语义含义的元素代替它。所以在你阅读本书的时候，它很可能又被规范忽略，你需要再次确认。
1.3.4 和
在使用HTML设计一个网页的时候，你经常会使用div元素来指定文档的具体段落。通常只需要这么做就可以正常工作。但是，如果你希望给段落一个特定的语义含义，而不只是一个“分隔”的时候，怎么办呢？
这就是article和section元素起作用的地方，选用哪一个元素，以及何时使用常常有点混淆。这种混淆是因为你被迫再去思考你所写的内容以及表现这些内容的方式。
如果你只是想要包含一些仅用于样式目的的信息，那么div元素是适用的，原因是div中的内容没有任何特定的语义含义，例如，这只是用作“包装器”元素，帮助页面中心的一些栏目的定位：
<div class="wrapper">
<div class="columnOne">This is column one</div>
<div class="columnTwo">This is column two</div>
</div>
如果你确定内容确实有语义含义，那么就必须仔细观察这个含义。W3C规范对seciton元素的定义如下：
“文档或者应用中的普通段落。在这一上下文中，段落（section）是内容的一个主题分组，通常有一个标题。”
所以，如果你所希望包含的内容很适合于放在一个标题下，那么section元素可能就是解决方案。但是在你最终决定使用section元素之前，我们先来简略地看看article元素，它是特殊类型的section元素。同样，W3C规范鼓励你在以下情况下使用article元素：“当对元素的内容进行组织是有意义的时候。”
这句话准确的意思是什么？
好吧，作为例子，考虑一下报纸上文章的版面设计。报纸上的文章可能包含几个段落，每个段落都有自己的标题。但是从总体上说，这些段落相互关联并组成一个整体，因为它们讲述的是相同的事情。如果你的内容是这种情况，那么就应该使用 article 元素。但是要记住，article元素和报纸上文章的概念无关，相关的只是设计的方法。article元素还可以表示你的衣橱中的衣服，因为它是表示独立且可以组织起来的内容单元的通用术语。它也可以与其他物品相关联。
当然，报纸文章的类比也说明了，你可以在article元素中嵌套section元素，反之亦然。但是和div元素一样，不要把内容搞得太乱或者过多地嵌套！
结合article和section元素，你的内容可能像下面这样：
<article>
<header>
<h1>HTML5 Multimedia</h1>
<span class="subtitle">The way forward!
</span>
</header>
<section>
<header>
<h2>Video</h2>
</header>
<p>This section talks about video...</p>
</section>
<section>
<header>
<h2>Audio</h2>
</header>
<p>This section talks about audio...</p>
</section>
<footer>
<small>Written by Ian Devlin 2011</small>
</footer>
</article>
使用上述的例子，你可以了解实践中如何在内容里使用 article 和section元素。这个例子有两个段落，其中一个包含有关视频的信息，另一个包含有关音频的信息。它们相互之间很清晰地分开，因此应该包含在单独的section元素中。
但是总体上它们又是相关的，同在“HTML5 Multimedia”这个标题下。所以它们应该处于同一个标题的section或者article元素下。在这个例子中，联合这些内容似乎是有意义的（例如，作为一个RSS feed的项目），所以最适合的元素似乎是article。
前面已经提到过，作为替代，你可以在一个article元素中包含许多section元素，例如在一个新闻提要页面中包含指向多篇文章的 链接：
<section>
<header>
<h1>HTML5 News</h1>
</header>
<article>
<header>
<h2>HTML5 Multimedia</h2>
</header>
<p>In this article you will learn all about
HTML5 Multimedia.</p>
<a href="html5-multimedia.html">Read more
...</a>
</article>
<article>
<header>
<h2>HTML5 and Semantic Structure</h2>
</header>
<p>This article is all about HTML5 and
structural semantics.</p>
<a href="html5-structural-semantics.html">
Read more...</a>
</article>
<footer>
<a href="news-list.html">View all</a>
</footer>
</section>
这些例子还说明了，如果Article和section元素具有语义含义，还可以包含header和footer元素，正如例子中所作的那样。
HTML5中的h元素
当前在HTML5世界里热议的一个话题是header元素中的h元素，以及是否应该在单个文档中使用多个h1元素。
你在“
和
”小节中可能已经注意到，在主header（在主article或者section中）元素中已经使用了一个h1元素，在子section/article的header元素中使用了h2元素。这样做是为了向后兼容性，因为浏览器（除了Firefox 5和chrome12以外）对所谓HTML5轮廓描绘算法（Outlining Algorithm）的支持很差。
HTML5轮廓描绘算法是HTML5规范的一部分，用于使用HTML5文档的文章标题、页面标题等确定其结构，以便绘制出文档。你可以在http://html5doctor.com/document-outlines链接文字阅读有关HTML5文档轮廓的内容。
目前，继续使用不同的h元素维护与旧浏览器的兼容性是明智的。随着新的浏览器发布，对该算法的支持自然会改进，但是和任何事情一样，最终的决定权在你。
1.3.5
nav元素用于包含整个网站的主导航，所以在这个元素中可以包含任何指向单独页面的链接，如“关于”页面、“新闻”页面和博客。它还可以包含任何网站外部的链接，也就是说带用户离开你的网站。例如链接到Twitter和Facebook账户，只要它们是你的网站的主导航组成部分就行。
nav的标记很简单，该元素通常包含一个无序列表，当然还可以简单地包含许多指向所考虑的页面的超链接：
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
nav元素通常包含在一个header中，但是这并不是必需的，它还可以包含在footer元素中，但是只有在该元素是网站的主导航时才可行。因为现在的脚注通常包含了一组辅助的网站导航链接，这些链接不应该包含在一个nav元素中。但是，同一个页面中可以有超过一个nav元素，它的使用应该得到保证。
1.3.6
aside元素用于包含与相邻的主要内容相关、但是不影响主要内容意义的非主要内容。aside元素的内容也可以有独立的意义，但并非必需。
aside元素目前的实际应用是用于边栏，当然可以包含从装饰和社交媒体到相关的链接、图像的任何东西：
<aside>
<header>
<h1>Twitter feed</h1>
</header>
<ul>
<li>#HTML5 is awesome! - 26th June 2011 @
14:30</li>
<li>Everyone should be using #HTML5 - 26th
June 2011 @
14:22</li>
</ul>
<footer>
<a href="http://twitter.com/iandevlin">
follow me!</a>
</footer>
</aside>
注意，aside元素也可以包含合适的header和footer元素。
1.3.7 和
两个新推出的元素可以用来将多媒体元素（图像、视频或者音频）和一个特定的标题关联，这当然使得包含在这些新元素里的内容更符合语义：figure元素和figcaption元素。
figcaption元素只能存在于一个figure元素中，但是它不是必需的元素。很显然，并非所有内容都有标题：
<figure>
<img src="images/html5-logo.gif" alt="The HTML5
logo" />
<figcaption>
<strong>Figure 1 - </strong>The HTML5 logo
in all its glory!
</figcaption>
</figure>
一般，你设置figcaption内容的样式为一个图像之上或者之下的小文本（如图1.1所示）。但是，你并不一定要这么做，可以按照你的喜好来设置样式！
Internet Explorer和浏览器兼容性
在本书编写的时候，所有主要浏览器的最新版本都支持许多新的HTML5元素，特别是本章提到的这些元素。但是IE 8和更早的版本没有支持。这些新的元素对这些浏览器来说是完全未知的，因此这些浏览器完全不显示这些元素。
但是并非完全没有希望。
你可以很容易地用Remy Sharp在Web文档的开头添加html5shim脚本：
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/ svn/trunk/html5.js">
</script>
<![endif]-->
这个脚本告诉IE浏览器在显示文档时可能碰到的新元素的情况，于是它很轻松地照办了。
对于那些较老的浏览器，你还必须为某些元素添加一些默认的CSS样式，使浏览器知道将它们当作块级元素显示：
<!--[if lt IE 9]>
<style>
article, aside, figure, footer, header,
hgroup, menu, nav, section {
display:block;
}
</style>
<![endif]-->
如果你想要设置一个元素的innerHTML属性或者在旧版本的IE浏览器和HTML5上使用jQuery，就必须在Web文档中添加innerShiv脚本（http://jdbartlett.com/innershiv）。
你必须自行下载并部署这个JavaScript文件，然后用和前面添加innershim文件相同的方式添加它：
<!--[if lt IE 9]>
<script src="innershiv.js"></script>
<![endif]-->
innershim和innerShiv文件协同工作，可以让你在旧版本的IE浏览器上使用HTML5。
注意，这些添加的内容包含在目标IE版本早于IE8的条件注释中。这是用于避免不需要这些脚本的浏览器进行不必要的添加和处理。
1.3.8
script元素的意义和用法在HTML5中完全没有改变。但是，因为本书的许多部分是有关JavaScript API的，所以有必要指出一个新颖有用的差别：如果你使用该元素来封装JavaScript，就不再需要指定type属性。
是的，WHATWG和W3C那些聪明的人们已经决定默认使用type=”text/javascript”，使你不必输入它，这样代码就简洁得多：
<script>
alert("I didn't have to specify the type
attribute!");
</script>
