本节书摘来自异步社区《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>