1、语义元素
大多数HTML5语义元素的用途是标识页面中的一个内容区块，为标注的内容赋予额外的含义，不真正做任何事。
2、使用语义元素的原因
- 容易修改和维护；
- 无障碍性（现代Web设计的一个重要主题）；
- 对搜索引擎的友好性高；
- 适应未来的浏览器和Web设计工具的发展趋势
3、语义元素的来历
在发明HTML5之前，其发明者花很长时间研究已有的网页，还研读了谷歌对十几亿个网页的统计信息。谷歌公布的这个调查分析并列出了Web作者在自己网页中使用的类名，将Web页面中一些共性的东西（比如页面都有页眉、页脚导航菜单等）从人们普通的做法中提取出相应的语义。发明者依据这个调查制定成了规范。
4、浏览器对语义元素的支持情况
HTML5的语义元素基本得到了所有现代浏览器的支持，最大的绊脚石还是IE9之前的Internet Exploer。
浏览器在遇到不认识的元素时，会把它们当成内联（inline）元素挤在一起，为了解决这个问题，可为HTML5的这些语义元素添加一个样式，可转化为块级元素：
article,aside,figure,figcaption,header,footer,nav,main,section,details,summary {
display:block;
}在支持HTML5元素的浏览器中并不会有影响。
5、用语义元素构建页面
- <article>元素
这个元素表示一个完整的、自成一体的内容块，比如博客文章或者新闻报道。<article>元素应该包含所有相关的内容，包括标题、作者署名以及正文，但不包含<footer>元素。例：
<article>
<header>
<h1>This is blog's title</h1>
</header>
<div class="content">
......
</div>
</article> <footer>
......
</footer>
- aside元素：用来添加附注
此元素表示与它周围的文本无密切的内容，可以用此元素介绍另一个相关的话题，或者对主文档提出的某个观点进行解释；另外，也可以用<aside>元素来盛放广告、相关内容或者链接，甚至可以添加醒目引文。
<aside>
<img src="quotes_start.png" alt="quote" /> <!--，开始引用符号的图片-->
<span>We don't know how the universe started, so we can't be sure it won't just end, maybe today.</span>
<img src="quotes_end.png" alt="quote" /><!--结束引用符号的图片-->
</aside>
- <figure>+<figcaption>元素
为页面添加插图（与普通图片区分），插图是与文本相关的，文本会提到它，且常常伴有图题（<figcaption>）。
<figure class="FloatFigure">
<img src="human_skull.jpg" alt="Human skull">
<figcaption>Will you be the last person standing if one of these apocalyptic scenarios plays out?</figcaption>
</figure>
- <header>元素
一个网页中可以包含多个<header>元素，有两种使用方式，差别并不是很大。
一种是用它标注内容的标题，此种情况除非必要，否则不必使用，只有在内容标题还附带了其他信息的情况下，才有必要，例：
<header>
<h1>......</h1>
<p>......</p>
<p>......</p>
</header>
另一种是它标注网页的页眉。
- <footer>元素
HTML5规定，只能在<footer>元素中放一些网站的版权信息、作品来源、法律限制以及链接之类的信息，不能放太多其他内容。
为了不违反HTML5的规定且在页面底部放入更多内容，可用如下：
<div class="fatfooter">
<aside>
<img src="..." />
<p>......</p>
</aside>
<footer>
<p>......</p>
</footer>
</div>
- <nav>元素：标注导航链接
<nav>
<ul>
<li><a href="#">......</a></li>
<li><a href="#">......</a></li>
<li><a href="#">......</a></li>
</ul>
</nav>
- <section>元素
可用于：和页面主体内容并列的小内容块、独立性内容（但并不是文章）、分组内容等。
- <details>和<summary>元素：折叠栏(但目前只有Chrome、Opera和Safari浏览器支持）
<details>
<summary>Section #1</summary>
<p>......</p>
</details>
- <main>元素
用于标识网页的主要内容，一个页面只能有一个此元素，对屏幕阅读器非常重要。