html5中的一些新语义标签

 <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>标签：
用来标记网页的页脚，放置一些网站版权信息等不太重要的信息。