请问大家常说的对HTML语义化的理解是啥?

Posted 2023-04-03

简单理解：
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 参考技术A 不同标签有不同的含义，也就是语义性，这些标签的语义性对SEO（搜索引擎优化）是有一定作用的。比如说p表示的是段落，dl表示的是自定义列表
所谓的DIV+CSS，并不是说所有的布局用标签都是用div，而是根据网页当中具体文字的特点，选择性的使用div、p、标题h系列、dl、ul、ol等各类标签。另外关于a、img也是一样。

前端面试 HTML— 谈谈你对HTML语义化的理解

根据内容的结构选择合适的标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

简单来说，一般有以下注意事项：

1. 尽可能少的使用无语义的标签 div 和 span；

2. 在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；

3. 不要使用纯样式标签，如：b、font、u 等，改用 css 设置；

4. 需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用CSS 指定就不用他们），strong 默认样式是加粗（不要用 b），em 是斜体（不用i）；

5. 使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 td；

6. 表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途；

7. 每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置id 属性，在 lable标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。

8. 为了更好的实现语义话，HTML5新增了如下语义标签：