语义化元素：有意义的元素。
对语义化的理解：
- 正确的标签做正确的事情；
- HTML5语义化元素让页面内容结构化清晰；
- 便于开发人员阅读，理解，维护；
- 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键字权重，利于SEO。
支持情况：IE9以上，现代浏览器！
原先我们都是用这样的代码进行布局：
1 ????<div class="nav"></div>2 ????<div class="header"></div>3 ????<div class="footer"></div>
而现在，我们可以使用语义化元素：
- <header>文档头部区域</header>
- <nav>导航链接区域</nav>
- <section>文档节区域(可以包含内容，标题，页眉，页脚等)</section>
- <article>定义文章区域</article>
- <aside>定义页面主区域内容之外的内容(比如侧边栏)</aside>
- <footer>定义底部区域</footer>
- <figure>定义独立的流内容(比如图像，代码等);与主内容相关，但删除后不会对主内容造成影响</figure>
- <figcaption>定义figure标题</figcaption>：放置在<figure></figure>之间！
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 ????<title>html5</title> 8 ????<link rel="shortcut icon" href="test.jpg" type="image/x-icon"> 9 ????<style>10 ????????header,nav,section,article,aside,footer{11 ????????????border: 3px solid gray;12 ????????}13 ????????.bgSection{14 ????????????width: 300px;15 ????????????border: 0px;16 ????????????position: relative;17 ????????????text-align: center;18 ????????????margin: 0 auto;19 ????????}20 ????????header,nav,footer{21 ????????????width: 300px;22 ????????????height: 50px;23 ????????????24 ????????}25 ????????section,article{26 ????????????width: 200px;27 ????????????height: 100px;28 ????????}29 ????????aside{30 ????????????width: 93px;31 ????????????height: 206px;32 ????????????position:absolute;33 ????????????left: 206px;34 ????????????top:112px;35 ????????}36 ????????nav p, ul{37 ????????????display: inline; ???????????38 ????????}39 ????????ul li{40 ????????????display: inline; ???????????41 ????????}42 ????????p{43 ????????????font-weight: bold;44 ????????????color: goldenrod;45 ????????}46 ????</style>47 </head>48 <body>49 ????<section class="bgSection">50 ????????<header> <p><header></p></header>51 ????????<nav>52 ????????????<p><nav></p>53 ????????????<ul>54 ????????????????<li><a href="">first</a></li>|55 ????????????????<li><a href="">second</a></li>|56 ????????????????<li><a href="">last</a></li>57 ????????????</ul>58 ????????</nav>59 ????????<section class="section1">60 ????????????<p><section></p>61 ????????</section>62 ????????<article>63 ????????????<p><article></p>64 ????????</article>65 ????????<aside>66 ????????????<p><aside></p>67 ????????</aside>68 ????????<footer>69 ????????????<p><footer></p>70 ????????</footer>71 ????</section>72 </body>73 </html>运行结果：
HTML5语义化元素
原文地址：http://www.cnblogs.com/why-not-try/p/7867681.html