「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」
做前端这么多年，很多时候都在纠结自己要不要使用语义化标签，使用语义化标签都需要注意些什么呢？
今天让我们来一起走进语义化标签这个庞大家族吧。
家族使命：
将页面信息的主次关系清晰地展现出来浏览器可以很好地支持阅读视图功能提升 SEO 搜索的机率对读屏软件友好
家族成员：
aside, article, hgroup, h1, h2, h3, h4, h5, h6, abbr, hr, p, strong, em, blockquote , q, cite, time, figure, figcaption, dfn, nav, ol, ul, pre, samp, code, small, s, i, b, u, data, var, kb, sub, sup, bdi, bdo, mark, wbr, menu, dl, dd, dt, main
家族分工：
家族核心成员
- main 作为家族的族长，一个家族最多只能存在一个族长，圈定了整个家族的主要领土区域（页面的主要内容）
- menu 作为家族的大管家，决定了家族企业发展的方向（功能菜单）
- nav、ol、ul 作为家族的族谱（目录）
- aside 作为家族的小导游，帮助快速找到要去的地方（导航性质的工具内容）
家族其他小组成员
- article 文章主体
- hgroup 标题组组长
- h1～h6 标题组成员
- figure 插入组组长（具有一定自包含性的内容）
- figcaption 插入组成员（内容标题）
- pre 自带美颜担当（这部分内容是已经排过版的了，就不劳烦浏览器再次进行排版工作了）
- samp 计算机程序的示例输出
- code 代码展示
- blockquote 表引述-段落级别
- q 表引述-行内级别
- cite 表引述-作品名称
- dl dd dt 定义术语
- sub 数字下标（数学中）
- sup 数字上标（数学中）
- bdi bdo 指定使用的语言 / 文本的书写方向
- abbr 单词的缩写
- hr 主题转变
- p 所处村落（段落）
- var 变量
- kbd 用户输入
- wbr 长单词中可以换行的位置
- mark 从读者角度希望的高亮
- dfn 被定义名词
- time 日期
- data 给机器阅读的内容
- strong 重要
- em 重音
家庭中迷路归家的成员
- small 做一些文书的工作（补充评论）
- s 判官（错误的内容）
- i 歌姬（读的时候变调）
- b 嗣子-家族未来的领头人（关键字）
- u 庶子-不可继承家主位置（避免歧义的标注）
在不了解语义化的各个成员的分工之前，一些功能相近的成员总是被安排在错误的岗位上，从而造成了歧义。建议有志于将语义化用于代码中的小伙伴，先把语义化的各个标签弄明白，毕竟不用要比用错地方强。但是我们对于用对还是要抱有追求的，愿我们的 2022 都能够正确使用语义化标签。
