HTML5：组织文档结构
所有的语义元素都有一个显著的特点：不真正做任何事，它们在外观上对内容的影响微乎其微，甚至根本没有影响。语义元素的存在主要有以下几条理由：
1）容易修改和维护。通过html5的语义元素，可以传达出额外的结构化信息，让人很容易理解文档的整体布局和不同区块的作用。
2）无障碍性。现代web设计的一个重要主题，就是让任何人都能无障碍地访问网页，就是让使用屏幕器和其他辅助工具的人都能在页面中*导航。
3）搜索引擎优化。使用html5能够让搜索引擎能够更好的理解你的网站，可以让它们收集到它们索引的页面的更多信息。
4）未来的功能。新浏览器和web编辑工具未来一定会利用语义元素。比如：将文档的主要部分重点呈现。
最关键的是，如果你正确地使用了语义元素，就能够创建更加清晰的页面结构，就能够适应未来的浏览器和web设计工具的发展趋势。下面将介绍用于组织文档结构的语义元素，首先以一个例子来了解html5通常的文档结构。
html5文档结构
老的html页面都是用p元素，再配上适当的样式表，但p元素的问题在于，它本身不反映与页面相关的任何信息。而html5的页面就是将这些p元素替换为具有描述性的语义元素。下面的例子包含了html5中用于描述文档结构的主要的语义元素，语义元素的使用和它们标注的内容的含义密切相关，理解了它们的含义，你就能灵活的使用它们。
things i like by adam freeman questions and comments?email me contents fruits i like additional fruits activities i like kinds of triathlon the kind of triathlon i am aiming for ...... why fruit is healthy here ar three reasons why everyone should eat more fruit: fruit contains lots of vitamins fruit is a source of fibre fruit contains few calories在上面的文档中包含了许多html5的元素，如果你想要将不同的元素在呈现上区分开来，你需要配合上适当的外观，这篇文章不涉及外观。i like to swim, cycle and run. i am in training for my first triathlon, but it is hard work.
kinds of triathlon there are different kinds of triathlon - sprint, olympic and so on. i am aiming for olympic, which consists of the following: 1.5km swim 40km cycle 10km run more information: learn more about fruit learn more about triathlons ©2011, adam freeman. visi apress
标题
html定义了一套标题元素体系，从h1到h6，h1级别最高。同级标题通常用来将内容分作几个部分，每个部分一个主题。而各级标题则通常用来表示同一主题的各个方面。他们共同构成了文档的大纲，因此用户只要浏览文档的各级标题即可初步了解其大意和结构，通过标题体系用户还可以迅速导航到感兴趣的内容。
fruits i like ......
子标题
hgroup元素可以用来将几个标题元素作为一个整体处理（如果不使用hgroup元素，主标题和子标题将被作为两个标题，而使用hgroup之后，主标题和子标题将被作为一个标题对待），以免扰乱html文档的大纲。
fruits i like how i learned to love citrus ......在这里，“how i learned to love citrus”就是作为“fruits i like”的子标题存在，两个将被作为一个标题对待，通常在样式上会将标题和子标题靠的更紧。
标记页面的主要区域
页面通常只有一个部分代表其主要内容，可以将这样的内容放在main元素中，该元素在一个页面仅使用一次。
...... ...... ......role="main"可以帮助屏幕阅读器定位页面的主要区域。
创建文章
article元素代表html元素中一段独立成篇的内容，可以独立于页面其余内容发布或使用，可以看作一篇文章。article可以嵌套在另一个article中，只要里面的article与外面的article是部分与整体的关系，且在语义上是可以独立存在的。一个页面可以有多个article元素，每个article都可以独立成篇，一个article可以包含一个或多个section元素（见下一节）。
...... ...... ...... ...... ...... ...... ...... ...... ......
节
section元素是html5新增，用于表示文档中的一节。并没有明确的规定什么情况下该使用section元素，但通常section元素应该用于包含那种应该列入文档大纲或目录中的内容。section可以属于某个article，一个article可以包含一个或者多个section。section元素通常包含一个或多个段落及一个标题，不过标题并不是必需的。
fruits i like how i learned to love citrus i like apples and oranges. additional fruits i also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. more information you can see other fruits i like here.上面定义了3个section，逐层嵌套，每个section的标题都是h1。不过在不同的浏览器上，section的层级结构的默认外观会有差异，可以通过创建自定义样式来解决这个问题。
section和article的区别在于，section在本质上组织性和结构性更强，可以看作一个独立的段落，而article代表的是自包含的容器。
首部和尾部
header元素表示一节的首部，可以包含刊头和徽标。header元素通常包含一个标题元素或一个hgroup元素，还可以包含该节的导航元素。一个页面可以包含任意数量的header元素，他们的含义可以根据其上下文而不同。
footer元素表示一节的尾部，通常包含该节的总结信息，还可以包含作者介绍、版权信息、到相关内容的链接、徽标及免责声明等。
things i like by adam freeman fruits i like how i learned to love citrus ...... activities i like ...... ©2011, adam freeman. visi apress本例定义了3个header元素。body元素的header元素作为整个文档的首部。
注意：不能在footer中嵌套header或另一个footer，也不能将tooter嵌套在header或address元素里。
导航区域
nav元素表示文档中的导航区域，包含到其他页面或同一页面的其他部分的链接。并不是所有的链接都需要放到nav元素中，该元素的目的是规划出文档的主要导航区域。
things i like by adam freeman contents fruits i like additional fruits activities i like kinds of triathlon the kind of triathlon i am aiming for ...... ...... more information: learn more about fruit learn more about triathlons ......这里使用了两个nav元素，在header中的部分为用户提供了本文档中的导航方法，另一个放在文档末尾，为用户提供了一些额外的链接。
注意不要将所有链接都放在nav区块中，nav通常应该只用于页面中最大最主要的导航区。例如上面提供的文档导航是由必要放在nav区块中的，可是，如果只是一些许可和联系方式的信息，就没必要放在nav区块中了。
附注栏
aside元素用来表示跟周边内容稍微沾一点边的内容，类似于书籍或杂志中的侧栏，其内容往往与页面的其他内容、article或section有点关系，但并非主体内容的一部分，它可以是一些背景信息、到相关文章的链接，诸如此类。
...... ...... why fruit is healthy here ar three reasons why everyone should eat more fruit: fruit contains lots of vitamins fruit is a source of fibre fruit contains few calories ...... ......你可以像在印刷品中使用附注栏一样使用aside元素，可以通过它介绍另一个相关的话题，或者对主文档中提出的某个观点进行解释。也可以使用aside元素来存放广告、相关内容链接等。
联系信息
address元素用于表示文档或article元素的联系信息。address元素如果为article元素的子元素时，它提供的联系信息被视为该article的；当address元素为body元素的子元素时，它提供的联系信息被视为整个文档的。address元素不能用来表示文档或文章的联系信息之外的地址，例如：不能用来表示客户或用户的地址。
...... questions and comments?email me ...... ......
详情区域
details元素在文档中生成一个区域，用户可以展开它以了解关于某主题的更多详情。details元素通常包含一个summary元素，用于为该详情区域生成一个说明标签或标题。
...... ......details元素在浏览器中是有默认外观的，在chrome中的效果如下：i like to swim, cycle and run. i am in training for my first triathlon, but it is hard work.
kinds of triathlon there are different kinds of triathlon - sprint, olympic and so on. i am aiming for olympic, which consists of the following: 1.5km swim 40km cycle 10km run
details元素默认情况下会是折拢状态，只有其summary元素的内容可见，要让页面一开始就展开，可以使用它的open属性（布尔属性）。
kinds of triathlon there are different kinds of triathlon - sprint, olympic and so on. i am aiming for olympic, which consists of the following: 1.5km swim 40km cycle 10km run效果如下：
小结
html5的语义元素是其发明者对已有的网页研究的基础上定义出来的，他们不仅浏览了自己喜欢的站点，也研读了谷歌对十亿个网页的统计信息。如果你感兴趣，可以在（google的站点，无法直接查看）查看。
目前，html5的语义元素在所有现代浏览器上都得到了支持，但对于一些老版本的浏览器（主要是ie9之前的internet explorer），需要一些补救措施。由于语义元素本身什么都不做，要支持它们，只要让浏览器把它们当作普通的p元素就行，而剩下的工作，就是为它们添加点样式规则，之后，即使使用老古董浏览器来访问这些网页，也都没有问题了。幸运的是，这些工作modernizr已经帮你实现了。