标签：
文档部分，即body部分，包含了访问者可以看到的内容。传统的HTML文档通常通过div元素来组织文档结构，再配上适当的样式表。但div元素的问题是缺少语义信息，在查看别人的源代码时，必须费点劲才能理解哪个div表示什么，整个页面时怎么搭建起来的，通常需要在HTML页面、样式表和浏览器之间跳来跳去。特别是如果HTML页面的组织结构不好，很容易就会导致困惑。对此，HTML5中新增了许多语义元素，用来替换div元素，并且将语义和呈现分离。最关键的是，如果你正确地使用了语义元素，就能够创建更加清晰的页面结构，就能够适应未来的浏览器和Web设计工具的发展趋势。下面将介绍用于组织文档结构的语义元素，首先以一个例子来了解HTML5通常的文档结构。
<body> <header> <hgroup> <h1>Things I like</h1> <h2>by Adam Freeman</h2> </hgroup> <address> Questions and comments?<a href="mailto:adam@myboringblog.com">Email me</a> </address> <nav> <h1>Contents</h1> <ul> <li><a href="#fruitsilike">Fruits I Like</a></li> <ul> <li><a href="#morefruit">Additional Fruits</a></li> </ul> <li><a href="#activitiesilike">Activities I Like</a></li> <ul> <li><a href="#tritypes">Kinds of Triathlon</a></li> <li><a href="#mytri">The kind of triathlon I am aiming for</a></li> </ul> </ul> </nav> </header> <main role="main"> <article> <header> ...... </header> <aside> <h1>Why Fruit is Healthy</h1> <section> Here ar three reasons why everyone should eat more fruit: <ol> <li>Fruit contains lots of vitamins</li> <li>Fruit is a source of fibre</li> <li>Fruit contains few calories</li> </ol> <section> </aside> <section> <p>I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work.</p> <details> <summary>Kinds of Triathlon</summary> There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following: <ol> <li>1.5km swim</li> <li>40km cycle</li> <li>10km run</li> </ol> </details> </section> </article> </main> <nav> More Information: <a href="http://fruit.org">Learn More About Fruit</a> <a href="http://triathlon.org">Learn More About Triathlons</a> </nav> <footer id="mainFooter"> ©2011, Adam Freeman. <a href="http://apress.com">Visi Apress</a> </footer> </body>在上面的文档中包含了许多HTML5的元素，如果你想要将不同的元素在呈现上区分开来，你需要配合上适当的外观，这篇文章不涉及外观。
<body> <h1>Fruits I like</h1> ...... </body>
<body> <hgroup> <h1>Fruits I like</h1> <h2>How I Learned to Love Citrus</h2> </hgroup> ...... </body>在这里，“How I Learned to Love Citrus”就是作为“Fruits I like”的子标题存在，两个将被作为一个标题对待，通常在样式上会将标题和子标题靠的更紧。
<body> ...... <main role="main"> <article> ...... </article> </main> ...... </body>role="main"可以帮助屏幕阅读器定位页面的主要区域。
<body> ...... <main role="main"> <article> <header> ...... </header> <aside> ...... </aside> <section> ...... </section> </article> <article> <header> ...... </header> <aside> ...... </aside> <section> ...... </section> </article> ...... </main> ...... </body>
<body> <section> <hgroup> <h1>Fruits I Like</h1> <h2>How I Learned to Love Citrus</h2> </hgroup> I like apples and oranges. <section> <h1>Additional fruits</h1> I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. <section> <h1>More information</h1> You can see other fruits I like <a href="fruitlist.html">here</a>. </section> </section> </section> </body>上面定义了3个section，逐层嵌套，每个section的标题都是h1。不过在不同的浏览器上，section的层级结构的默认外观会有差异，可以通过创建自定义样式来解决这个问题。
<body> <header> <hgroup> <h1>Things I like</h1> <h2>by Adam Freeman</h2> </hgroup> </header> <section> <header> <hgroup> <h1>Fruits I Like</h1> <h2>How I Learned to Love Citrus</h2> </hgroup> </header> ...... </section> <section> <header> <h1>Activities I like</h1> </header> ...... <section> <footer id="mainFooter"> ©2011, Adam Freeman. <a href="http://apress.com">Visi Apress</a> </footer> </body>本例定义了3个header元素。body元素的header元素作为整个文档的首部。
<body> <header> <hgroup> <h1>Things I like</h1> <h2>by Adam Freeman</h2> </hgroup> <nav> <h1>Contents</h1> <ul> <li><a href="#fruitsilike">Fruits I Like</a></li> <ul> <li><a href="#morefruit">Additional Fruits</a></li> </ul> <li><a href="#activitiesilike">Activities I Like</a></li> <ul> <li><a href="#tritypes">Kinds of Triathlon</a></li> <li><a href="#mytri">The kind of triathlon I am aiming for</a></li> </ul> </ul> </nav> </header> <section> ...... </section> <section> ...... </section> <nav> More Information: <a href="http://fruit.org">Learn More About Fruit</a> <a href="http://triathlon.org">Learn More About Triathlons</a> </nav> <footer id="mainFooter"> ...... </footer> </body>这里使用了两个nav元素，在header中的部分为用户提供了本文档中的导航方法，另一个放在文档末尾，为用户提供了一些额外的链接。
<body> <header> ...... </header> <article> <header> ...... </header> <aside> <h1>Why Fruit is Healthy</h1> <section> Here ar three reasons why everyone should eat more fruit: <ol> <li>Fruit contains lots of vitamins</li> <li>Fruit is a source of fibre</li> <li>Fruit contains few calories</li> </ol> <section> </aside> ...... </article> <footer id="mainFooter"> ...... </footer> </body>你可以像在印刷品中使用附注栏一样使用aside元素，可以通过它介绍另一个相关的话题，或者对主文档中提出的某个观点进行解释。也可以使用aside元素来存放广告、相关内容链接等。
<body> <header> ...... <address> Questions and comments?<a href="mailto:adam@myboringblog.com">Email me</a> </address> ...... </header> ...... </body>
<body> <header> ...... </header> <article> <header> ...... </header> <section> <p>I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work.</p> <details> <summary>Kinds of Triathlon</summary> There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following: <ol> <li>1.5km swim</li> <li>40km cycle</li> <li>10km run</li> </ol> </details> </section> </article> </body>details元素在浏览器中是有默认外观的，在chrome中的效果如下：
<details open> <summary>Kinds of Triathlon</summary> There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following: <ol> <li>1.5km swim</li> <li>40km cycle</li> <li>10km run</li> </ol> </details>效果如下：
标签：
原文地址：http://blog.csdn.net/tomato__/article/details/50491528
