文档部分，即body部分，包含了访问者可以看到的内容。传统的HTML文档通常通过div元素来组织文档结构，再配上适当的样式表。但div元素的问题是缺少语义信息，在查看别人的源代码时，必须费点劲才能理解哪个div表示什么，整个页面时怎么搭建起来的，通常需要在HTML页面、样式表和浏览器之间跳来跳去。特别是如果HTML页面的组织结构不好，很容易就会导致困惑。对此，HTML5中新增了许多语义元素，用来替换div元素，并且将语义和呈现分离。
所有的语义元素都有一个显著的特点：不真正做任何事，它们在外观上对内容的影响微乎其微，甚至根本没有影响。语义元素的存在主要有以下几条理由：
1）容易修改和维护。通过HTML5的语义元素，可以传达出额外的结构化信息，让人很容易理解文档的整体布局和不同区块的作用。
2）无障碍性。现代web设计的一个重要主题，就是让任何人都能无障碍地访问网页，就是让使用屏幕阅读器和其他辅助工具的人都能在页面中自由导航。
3）搜索引擎优化。使用HTML5能够让搜索引擎能够更好的理解你的网站，可以让它们收集到它们索引的页面的更多信息。
4）未来的功能。新浏览器和Web编辑工具未来一定会利用语义元素。比如：将文档的主要部分重点呈现。
最关键的是，如果你正确地使用了语义元素，就能够创建更加清晰的页面结构，就能够适应未来的浏览器和Web设计工具的发展趋势。下面将介绍用于组织文档结构的语义元素，首先以一个例子来了解HTML5通常的文档结构。
HTML5文档结构
老的HTML页面都是用div元素，再配上适当的样式表，但div元素的问题在于，它本身不反映与页面相关的任何信息。而HTML5的页面就是将这些div元素替换为具有描述性的语义元素。下面的例子包含了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>
