什么是语义化的元素
语义即是意义的意思。意思就是通过这个标签的名字就可以知道这个标签的含义。
比如div，p，span就不是语义化的元素，因为你不能通过这个标签来获悉它的含义。
而header，img等就是语义化的元素，我们知道这个标签代表是什么。
为什么要推行语义化的元素
对浏览器：
更好的搜索引擎收录。
增强网页的结构性。
对用户，工程师和维护团队：
使用语义化无义增强了代码的可读性和维护性。
HTML5新增的语义化元素
1.section（节）
section常用来定义网页中的章节，页眉，页脚一类的。
而且section也通常是呈现一组信息（包含了内容和标题），就像书本的中的章节一样。
<section><h1>章节标题</h1><p>章节内容</p></section>
2、article
article常用来定义独立的内容。
<article><h1>章节标题</h1><p>章节内容</p></article>
我们可以看到section和article的使用很类似，那么怎区分它们呢。
打个比方，section就像是一本书里面的大的章节部分，而article则是其中的小的，独立的一个部分，比如说注释的部分。article总是代表独立的一个章节，和上下文没有关联性。还有一点，section和article是可以互相嵌套使用。置于在你的网页中到底怎么使用，需要自己体会。
3.nav
nav标签是用来定义导航链接部分的标签，但注意的是，这并非定义链接(a)标签，也就是a标签可以单独使用。
nav还有一个好处就是可以很好的实现响应式设计。比如在手机浏览器或者小屏幕浏览器上，我们可以看到有些导航栏默认是省略了的。
<nav><a href="www.badu.com">百度</a><a href="www.google.com">谷歌</a><a href="https://cn.bing.com/">必应</a></nav>
4.aside
aside用来定义侧边栏。
从语义化的角度来说，aside需要和主内容相关联。
<aside><p>这是侧边栏</p></aside>
5.header
用来定义文档标题栏部分。
header可以嵌套在article和section之中，可以包含<h1>-<h6>的标题头和其他内容，组成一个标题介绍区域。
比如我们常看见的作者信息，logo，icon等就可以放在header之中。
<header><h1>这是一个标题区域</h1><p>可以包含其他的内容</p></header>
6.footer
和上面的header相对应的是footer。
footer中包含的通常是版权信息，友情链接等等。这个部分在很多网站都是常见的，大部分网站的最底端就是这个footer。
<footer> ?<p>Posted by: Hege Refsnes</p> ?<p>Contact information: <a href="mailto:someone@example.com"> ?someone@example.com</a>.</p></footer>
7.figure和figcaption
用来定义一些独立的图片，代码块，插图和统计图表等。
figuer把figcaption包含在内。figcaption就是对图片或者代码块的说明部分。
<figure> ?<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> ?<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption></figure>
兼容性问题
在IE8的早期版本中可能无法使用某些新增元素。
需要下载HTML5 Shiv脚本
然后在<head>部分插入下面的代码：
<!--[if lt IE 9]><script src="html5shiv.js"></script> <![endif]-->
回顾HTML5的语义化元素
原文地址：http://www.cnblogs.com/comefuture/p/7500377.html