写在前面
在早期没有专业前端人员出现以前，都是由后端开发人员负责写 HTML 页面，后端开发人员通常使用 table 布局来写 HTML页面，就导致出现各种 table 套 table 的情况，会出现很多问题。
后来 HTML 页面就由美工人员负责撰写，美工人员通常使用 div+css 布局来写 HTML 页面，虽然相比于 table 布局优化很多，但是这种无语义化标签的布局让代码阅读起来很困难，而且 SEO 不友好。
直到后来专业前端人员出现，开始使用正确的标签进行页面开发，即 HTML 提供的语义化标签。HTML 语义化要求开发人员应根据内容的结构化，选择合适的标签，例如在对一个页面进行开发时，如果是文章就写 article 标签，章节就写 section ，标题就写 h1 标签，视频就写 video 标签等等。
HTML 语义化的意义
- SEO (搜索引擎优化) 友好，HTML 语义化使得网页有良好的结构和语义，能更容易地被搜索引擎抓取。
- 方便其他设备的解析，如屏幕阅读器、移动设备等，以便于更好地渲染网页。
- 便于团队开发和维护，语义化可读性强，可以减少差异化。
常用的语义化标签
在 mdn 里对 HTML 元素的分类非常详细，详见 mdn-HTML元素参考
header(头部)
nav(导航)
main(主要部分)
artical(文章)
section(章节)
aside(次要部分)
footer(尾部)
address(联系信息)
progress(进度条)
img(图片) / audio(音频) / video(视频)
canvas(画板)
input(输入) / output(输出)
label 常与 input 配合使用，label 用于描述输入名称
form(表单) / table(表格)
datalist(数据列表)
details(详细信息)
若有收获，就点个赞吧
0 人点赞
