HTML语义化

什么是语义化

语义标签就是工作中经常会用到的一类标签，它们的特点是视觉表现上交互都差不多，主要的区别在于它们表示了不同的语义，比如大家会经常见到的section，nav。

语义是我们说话表达的意思，多数的语义实际上都是由文字来承载的，语义类标签则是纯文字的补充，比如：标题，自然段，章节，列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。

 

语义化的好处

1. 语义化标签对开发者更为友好，使用语义化标签增强了可读性，即使在没有css的时候，开发者也能清晰的看出网页结构，便于团队的开发和维护。

2. 语义化标签十分适宜机器阅读，它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，能提升网页的搜索量。

3. 语义化标签还支持读屏软件，可以根据文章自动生成目录

 

语义化标签的使用场景

1. 自然语言表达能力的补充

• em：重音标签

今天我吃了一个苹果

当我们想要对这句话中的某个词语有一个强调的时候，可以使用em标签，消除歧义，更好的表达语句的意思。
 

2. 文章标题摘要

3. 适合机器阅读的整体结构

• header：通常只出现在前部，表示导航或者介绍性的内容
• footer：通常出现在尾部，包含一些作者信息，相关链接，版权信息
• section：标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
• aside：表示和文章主体不那么相关的部分， 它可能包含导航，广告等工具性质的内容
• nav：定义页面的导航链接部分区域
• article：一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。