★文章内容学习来源：拉勾教育大前端就业集训营

本篇目录：
  • 标签语义化含义
  • HTML5新增语义化标签
  • 注意事项

一、标签语义化含义

  • 以前制作网页布局，我们基本用div 来做;
  • div就是一个普通的块级标签， 对于搜索引擎来说，是没有语义的；
  • div本身没有语义，设置了类名对于搜索引擎来说也没有什么用处；
  • 而标签的语义化对于 seo(Search Engine Optimization)搜索引擎优化有用处。

二、 HTML5一些新增的语义化标签

标签 含义
<header> 用于网页的头部
<nav> 导航
<main> 用于网页主体部分的划分
<article> 用于网页独立的内容
<section> 用于网页某个区段，类似div
<aside> 侧边栏标签，可在左边/右边
<footer> 尾部标签（版权/公司等信息） 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>语义化标签</title>
  <style> * {
     margin: 0; padding: 0; } header,nav,article,aside,main,footer {
     display: block; } header {
     width: 1000px; height: 100px; margin: 0 auto; background-color:hotpink; } nav {
     width: 1000px; height: 50px; margin: 10px auto 0; background-color: yellowgreen; } main {
     width: 1000px; height: 400px; margin: 10px auto 0; background-color: rgb(134, 230, 217); text-align: left; } main aside {
     float: left; width: 150px; height: 390px; margin: 5px; background-color: pink; } main article {
     float: left; width: 840px; margin: 5px 0; height: 180px; background-color:lavender; } main section{
     float: left; width: 840px; height: 180px; background-color: yellow; } footer {
     width: 1000px; height: 80px; margin: 10px auto 0; background-color: tomato; } </style>
</head>
<body>
  <header>头部</header>
  <nav>导航</nav>
  <main>
    主体区域
    <aside>侧边栏</aside>
    <article>独立的内容</article>
    <section>区段</section>
  </main>
  <footer>底部</footer>
</body>
</html>

三、注意事项

  • 这种语义化标准主要针对搜索引擎的（如果不做搜索引擎，可以一样用div）；
  • 这些新标签页面中可以使用多次；
  • 在IE9中，需要把这些元素转换为块级元素；（因为有兼容问题：IE8以下都没有这些标签）；
  • 移动端更喜欢使用这些标签；
  • HTML5 还增加了很多其他标签，后面可以慢慢学。具体可参见此链接：（HTML学习）。

下篇继续：
【49】HTML5 （3）——HTML5 新增多媒体标签