HTML语义化的案例分析:分析一些实际网站的HTML结构,对比非语义化标签的差异 | 青训营

56 阅读2分钟

1、HTML的语义是什么?

基本上,有几个主要的标签,像标题(H1~H6), list (li), strong em,等等。
基于结构化语义的内容(内容),选择合适的选项卡(语义代码),让开发人员同时阅读和编写更优雅的代码,浏览器爬虫和机器很好。

2、为什么html语义化呢?

在没有CSS的情况下,页面也呈现出良好的内容结构和代码结构:看起来不错
用户体验:例如,标题和Alt是用来解释名词或解释图片信息和标签标签的
有利于SEO:与搜索引擎建立良好的沟通,帮助爬虫抓取更有效的信息:爬虫依靠标签来确定每个关键词的上下文和权重
促进其他设备的分辨率(如屏幕阅读器、盲人阅读器、移动设备)以一种有意义的方式呈现页面
为了便于团队开发和维护,它更易于阅读和可读性,这是下一页的重要趋势。遵循这个标准,遵循W3C标准的团队可以减少差异。

3、语义化的收益性?

HTML 语义化并不是实现可识别性的唯一手段,标签 id、属性、样式名都可以。
写个CSS样式类,顺便就把识别性的问题解决了(试想一下,如果不能自定样式,或者样式只能使用类选择器,谁还能不语义化?),样式类重复再通过属性或id来识别。
和前面这几种方式相比,语义化没有明显的使用收益。

4、不使用语义化的损失?

从开发者的角度考虑,如果不使用语义化的标签会有什么坏处呢?

**很遗憾,几乎没有~ **

论代码的可读性,可不是HTML语义化就能解决的,况且id和css样式类几乎也能解决。
论SEO,其它手段也有:写好 meta 标签,多用链接。当然花钱肯定是最直接见效的。
至于考虑视觉障碍用户,这个需求的优先级就不用过多解释了,中小型公司压根都不会考虑。

语义化代码展示

1.png

5、总结

依此可以看出使用语义化可以使代码更方便阅读也利于团队开发,但如果能做好语义化,那读屏器就能更加优化的播放提示语,以及方便的快速跳选内容,极大提升用户体验。