<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的元素，如果你想要将不同的元素在呈现上区分开来，你需要配合上适当的外观，这篇文章不涉及外观。
标题
HTML定义了一套标题元素体系，从h1到h6，h1级别最高。同级标题通常用来将内容分作几个部分，每个部分一个主题。而各级标题则通常用来表示同一主题的各个方面。他们共同构成了文档的大纲，因此用户只要浏览文档的各级标题即可初步了解其大意和结构，通过标题体系用户还可以迅速导航到感兴趣的内容。
<body>
<h1>Fruits I like</h1>
......
</body>
子标题
hgroup元素可以用来将几个标题元素作为一个整体处理（如果不使用hgroup元素，主标题和子标题将被作为两个标题，而使用hgroup之后，主标题和子标题将被作为一个标题对待），以免扰乱HTML文档的大纲。
<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”的子标题存在，两个将被作为一个标题对待，通常在样式上会将标题和子标题靠的更紧。
