语义化元素：有意义的元素。
对语义化的理解：
- 正确的标签做正确的事情；
- HTML5语义化元素让页面内容结构化清晰；
- 便于开发人员阅读，理解，维护；
- 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键字权重，利于SEO。
支持情况：IE9以上，现代浏览器！
原先我们都是用这样的代码进行布局：
<div class="nav"></div>
<div class="header"></div>
<div class="footer"></div>
而现在，我们可以使用语义化元素：
- <header>文档头部区域</header>
- <nav>导航链接区域</nav>
- <section>文档节区域(可以包含内容，标题，页眉，页脚等)</section>
- <article>定义文章区域</article>
- <aside>定义页面主区域内容之外的内容(比如侧边栏)</aside>
- <footer>定义底部区域</footer>
- <figure>定义独立的流内容(比如图像，代码等);与主内容相关，但删除后不会对主内容造成影响</figure>
- <figcaption>定义figure标题</figcaption>：放置在<figure></figure>之间！
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html5</title>
<link rel="shortcut icon" href="test.jpg" type="image/x-icon">
<style>
header,nav,section,article,aside,footer{
border: 3px solid gray;
}
.bgSection{
width: 300px;
border: 0px;
position: relative;
text-align: center;
margin: 0 auto;
}
header,nav,footer{
width: 300px;
height: 50px; }
section,article{
width: 200px;
height: 100px;
}
aside{
width: 93px;
height: 206px;
position:absolute;
left: 206px;
top:112px;
}
nav p, ul{
display: inline;
}
ul li{
display: inline;
}
p{
font-weight: bold;
color: goldenrod;
}
</style>
</head>
<body>
<section class="bgSection">
<header> <p><header></p></header>
<nav>
<p><nav></p>
<ul>
<li><a href="">first</a></li>|
<li><a href="">second</a></li>|
<li><a href="">last</a></li>
</ul>
</nav>
<section class="section1">
<p><section></p>
</section>
<article>
<p><article></p>
</article>
<aside>
<p><aside></p>
</aside>
<footer>
<p><footer></p>
</footer>
</section>
</body>
</html>
运行结果：