HTML语义化是指根据HTML元素的语义用途合理地使用HTML标签来组织页面内容，通过使用具有明确语义含义的标签，帮助开发者更好地组织页面结构，提高代码的可读性和可维护性，同时也有助于搜索引擎更好地理解页面内容，提高搜索结果的准确性和相关性。
语义化的好处：
1、语义化标签并不是为了用户去阅读的，而是为了机器更好地阅读理解代码提高运行速度，HTML语义化标签的作用对象是机器也就是搜索引擎。
2、而当我们使用HTML语义化标签的时候，大大提高了我们代码的可读性，协同开发的时候，开发人员可以清晰地看懂结构，提高了团队之间的合作效率。
3、搜索引擎的爬虫根据语义化标签的关键字确定上下文权重，使用语义化标签，加大权重，使页面在搜索引擎上排名更加靠前。
HTML5提倡语义化标签。非语义化标签有：div和span。
HTML5常用的语义化标签：
<header>代表网页的头部，可以使用到“网页”或任意“section”的头部部分，没有个数限制，如果h1-h6自己就能工作的很好，那就不要用header。
<nav> 代表网页的导航，用在整个页面主要导航部分上，不合适就不要用nav元素。
<aside> 代表网页的侧边栏，aside在article内表示主要内容的附属信息，在article之外则可做侧边栏，没有article与之对应，最好不用；如果是广告，其他日志链接或者其他分类导航也可以用。
<section> 代表网页的区块，一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article，section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div；表示文档中的节或者段，article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div。
非语义化案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 网页头部 -->
<div class="header"></div>
<!-- 网页导航 -->
<div class="nav"></div>
<!-- 网页侧边栏 -->
<div class="aside"></div>
<!-- 网页区块 -->
<div class="section"></div>
</body>
</html>
全部用div标签完成，对搜索引擎而言没有任何语义。
语义化案例：
<!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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header,nav,main,aside,section,article,footer{
display: block;
}
header{
width: 1000px;
height: 100px;
margin: 5px auto;
background-color: #ee912e;
}
nav{
width: 1000px;
height: 80px;
margin: 5px auto;
background-color: #ee6078;
}
main{
width: 1000px;
height: 400px;
margin: 5px auto;
background-color: #16e8cf;
overflow: hidden;
}
main aside:first-child{
float: left;
width: 400px;
height: 400px;
margin-right: 5px;
background-color: rgb(4, 125, 68);
}
main section{
float: left;
width: 590px;
height: 400px;
margin-right: 5px;
background-color: rgb(202, 244, 14);
overflow: hidden;
}
</style>
</head>
<body>
<header>网页头部</header>
<nav>网页导航</nav>
<main>
<aside>网页侧边栏</aside>
<section>网页区块</section>
</main>
</body>
</html>
使用了header、nav、aside等语义化标签，使代码更加简单易懂，可读性大大提高。
注意事项：
1、尽量减少使用div和span标签的使用频率。
2、p标签默认具有上下margin。
3、不要使用纯样式标签，而是使用CSS。
