<header>
<nav>
<ul>
<li><a href="">栏目1</a></li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
</ul>
</nav>
</header> <main>
<article>
<header>
<hgroup>
<h1>这是h1标题</h1>
<h2>这是文章的副标题</h2>
</hgroup>
<p>这是头部的文字，文章发布于<time>2016-02-24</time></p>
</header>
<div class="content">
<p>这里是文章的正文。</p>
<figure>
<img src="xxx.jpg" alt="xxx">
<figcaption>这里是图片的图片标题</figcaption>
</figure>
</div>
</article>
</main> <aside>
<h2>相关文章推荐</h2>
<ul>
<li>文章1</li>
<li>文章2</li>
</ul>
</aside>
<footer>
<p>这是页脚的文字</p>
</footer>
html5最重要的特性之一，是引入了一些具有语义的标签，使得页面的代码更可读和结构化。
基本上来说，IE8以下的版本对html5的新标签支持非常差，需要一些方法来使这些浏览器支持这些新标签。
<time>标签：
用于标记时间和日期。
<nav>标签：
用来标注导航链接。一个页面可以包含多个nav区块。
<main>标签：
标记文档的主要内容。
<article>标签：
表示一个完整的、自成一体的内容块，如博客文章、新闻报道或者用户评论等。<article>标签应该包含所有相关的内容，包括标题、作者署名以及正文等。
<header>标签：
用来描述或导航包含它的父级区块，通常需要包含h标签。在一个网页中可以有多个header标签。如同时有网页的header和正文的header。
<hgroup>标签：
如果除了主标题，还有一个副标题，则应该把h1和h2放到hgroup中，此时h2不表示下面文字的子标题，而是整篇文章的副标题。
<figure>标签：
用来标记插图区域。插图是文章中的附图，在文章中会提到它。
<figcaption>标签：
用来标记题图。
<aside>标签：
用来标记与周围内容关系不太密切的内容，如广告、侧边栏等。
<section>标签：
是一个带标题的独立性内容块。
<footer>标签：
用来标记网页的页脚，放置一些网站版权信息等不太重要的信息。