例如,我们布局,经常使用div来做。但div对搜索引擎来说,是没有语义的。
HTML5新增的语义化标签:
<header>
:头部标签<nav>
:导航标签<article>
:内容标签<section>
:定义文档的某个区域<aside>
:侧边栏标签<footer>
:尾部标签
注意:
- 这些语义标准主要是针对搜索引擎
- 这些新标签在页面中可以使用多次
- IE9中,需要把这些元素转换为块级元素
- 在移动端更喜欢用这些标签
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,
nav {
height: 60px;
background-color: purple;
border-radius: 15px;
width: 800px;
margin: 10px auto;
}
section {
width: 500px;
height: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<header>头部标签</header>
<nav>导航栏</nav>
<section>某个区域</section>
</body>
</html>