文章目录
前言一、什么叫HTML标签的语义化二、使用场景1.文档类页面2.词条类页面 使用意义使用注意总结前言
最近学习着 重学前端，但有些内容可能平时用不太上，故将知识和理解加工成文章，共享给大家，希望大家不吝指教！
本篇做一个总起，后面会记录一些语义化标签，以追根溯源的文章形式陆续放出~
一、什么叫HTML标签的语义化
先上MDN的说法吧：HTML中的语义
可能做出来的页面没什么区别，像paragraph标签与division标签
<p></p><div></div>
区别在哪呢，哦~，区别就在标签名上
举个例子：
<p></p>=> paragraph => 段落。顾名思义，这个标签的内容是一个段落<header></header>=> header => 头部。那这个标签内容，就该是页面的头部内容
等等诸如此类…
二、使用场景
1.文档类页面
来个案例
字节跳动小程序文档
截图的条条框框，更像是给页面做一个内容划分，就像是在说，这个地方应该用header标签包起来，那个地方应该用aside标签包起来一样。
2.词条类页面
来个更经典的案例
MDNMDN直接用上了相应的标签，大家可以打开开发者工具（f12）看下MDN
使用意义
某梁姓同学：搞这些花里胡哨的没用，没有不也好好的？
这位同学说对了一半
没有这些语义化标签，确实页面也能搭起来，确实div + span一把梭很爽，确实没什么影响
更深入来讲，有些标签还会自带样式，像ul li之流，一个不慎就把页面给搞乱了
不好使
但是，不代表它没用
读起代码来更好懂
换一个人来看你的代码，他可以更容易地，不用看标签内容地发现，header标签对应的是你的页面的头部这块地方，aside对应的是侧边栏；利于SEO
你的代码更有纹理，受益的不止是阅读你的代码的人，还有机器。搜索引擎虫会根据标签的上下文来权衡关键字的重要性；无障碍阅读
读屏软件可以通过标签了解你的页面架构~自带样式
在网络不给力的情况下，CSS很难加载出来，这个时候语义化标签自带的样式能够让页面不那么难看
这里有篇文章，详细介绍了原因
使用注意
当然，你不能因为有点使用意义就急冲冲地去使用它们。
一个main标签给放到头部，我相信这对SEO不是什么好事
总结
以上就是今天要讲的内容，本文仅仅简单介绍了下语义化标签的定义和场景意义。希望能启发大家平时留意一下平时忽略的标签，后面也会将采集到的标签，做一篇篇寻根问底的介绍文章。
也希望大家多多给出意见！谢谢！
