为什么要进行HTML语义化？语义化有哪些注意事项？

更新时间:2021-04-22 来源:黑马程序员浏览量:

1577370495235_学IT就到黑马程序员.gif

1）首先、语义化，故名思意，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后在开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。

2）其次、其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如标签，以为head(头)，在HTML中就是就是用来定义标题，还有p标签，英文是pagrapph段落，table表格标签,等等。

为什么要语义化？

1）为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂一二。（其实，就是为了不穿CSS外衣，裸奔依然好看）。
2）提高用户体验，比如：title，alt用于解释名词和图片信息。
3）利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
4）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
5）便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，利于规范化。

基于此，在写页面结构时，我们应该注意什么呢？

1）尽可能少的使用没有语义的div和span元素。
2）在对语义要求不明显时，技能使用div也能使用p,那就使用p，以为p默认有上下边距，可以兼容特殊终端。
3）不要使用纯样式标签，如：b、font、u等，改用css设置。
4）需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b，因为没语义），em是斜体（不用i同b）。
5）使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头标题用th，内容单元格用td。

1619070673871_HTML语义化11.jpg