【语义化标签】【Semantic HTML】div span a之外的内容

---

前言

最近学习着 重学前端，但有些内容可能平时用不太上，故将知识和理解加工成文章，共享给大家，希望大家不吝指教！
本篇做一个总起，后面会记录一些语义化标签，以追根溯源的文章形式陆续放出~

---

一、什么叫HTML标签的语义化

先上MDN的说法吧：HTML中的语义
可能做出来的页面没什么区别，像paragraph标签与division标签

<p></p>
<div></div>

区别在哪呢，哦~，区别就在标签名上
举个例子：

• <p></p> => paragraph => 段落。顾名思义，这个标签的内容是一个段落
• <header></header> => header => 头部。那这个标签内容，就该是页面的头部内容

等等诸如此类…

二、使用场景

1.文档类页面

来个案例

字节跳动小程序文档
截图的条条框框，更像是给页面做一个内容划分， 就像是在说，这个地方应该用header标签包起来，那个地方应该用aside标签包起来一样。

2.词条类页面

来个更经典的案例

MDN MDN直接用上了相应的标签，大家可以打开开发者工具（f12）看下

MDN

---

使用意义

某梁姓同学：搞这些花里胡哨的没用，没有不也好好的？

这位同学说对了一半
没有这些语义化标签，确实页面也能搭起来，确实div + span一把梭很爽，确实没什么影响
更深入来讲，有些标签还会自带样式，像ul li之流，一个不慎就把页面给搞乱了
不好使

但是，不代表它没用

1. 读起代码来更好懂
   换一个人来看你的代码，他可以更容易地，不用看标签内容地发现，header标签对应的是你的页面的头部这块地方，aside对应的是侧边栏；
2. 利于SEO
   你的代码更有纹理，受益的不止是阅读你的代码的人，还有机器。搜索引擎虫会根据标签的上下文来权衡关键字的重要性；
3. 无障碍阅读
   读屏软件可以通过标签了解你的页面架构~
4. 自带样式
   在网络不给力的情况下，CSS很难加载出来，这个时候语义化标签自带的样式能够让页面不那么难看

这里有篇文章，详细介绍了原因

使用注意

当然，你不能因为有点使用意义就急冲冲地去使用它们。
一个main标签给放到头部，我相信这对SEO不是什么好事

总结

以上就是今天要讲的内容，本文仅仅简单介绍了下语义化标签的定义和场景意义。希望能启发大家平时留意一下平时忽略的标签，后面也会将采集到的标签，做一篇篇寻根问底的介绍文章。

也希望大家多多给出意见！谢谢！