重学前端(2)-语义化
我们先来说说为什么要用语义。
现在我们很多的前端工程师写起代码来,多数都不用复杂的语义标签, 只靠 div 和 span 就能走天下了。
这样做行不行呢?毫无疑问答案是行。那这样做好不好呢?按照正确的套路,我应该说不好,但是在很多情况下,答案其实是好。
这是因为在现代互联网产品里,HTML 用于描述“软件界面”多过于“富文本”,而软件界面里的东西,实际上几乎是没有语义的。比如说,我们做了一个购物车功能,我们一定要给每个购物车里的商品套上 ul 吗?比如说,加入购物车这个按钮,我们一定要用 Button 吗?
实际上我觉得没必要,因为这个场景里面,跟文本中的列表,以及表单中的 Button,其实已经相差很远了,所以,我支持在任何“软件界面”的场景中,直接使用div 和 span。
在很多工作场景里,语义类标签也有它们自己无可替代的优点。正确地使用语义标签可以带来很多好处。
语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 CSS 的时候,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护。
除了对人类友好之外,语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合搜索引擎检索(SEO),也可以让搜索引擎爬虫更好地获取到更多有效信息,有效提升网页的搜索量,并且语义类还可以支持读屏软件,根据文章可以自动生成目录等等。
不过,不恰当地使用语义标签,反而会造成负面作用。
ul 多数出现正在行文中间,它的上文多数在提示:要列举某些项。但是,如果所有并列关系都用 ul,会造成大量冗余标签。错误地使用语义标签,会给机器阅读造成混淆、增加嵌套,给 CSS 编写加重负担。
对于语义标签,是:“用对”比“不用”好,“不用”比“用错”好。当然了,我觉得有理想的前端工程师还是应该去追求“用对”它们。
作为自然语言延伸的语义类标签(使用场景)
1、作为自然语言和纯文本的补充,用来表达一定的结构或者消除歧义。
2、HTML 的有些标签实际上就是必要的,甚至必要的程度可以达到:如果没有这个标签,文字会产生歧义的程度。
// 当没有上下文时,如何消除歧义呢?这就要用到我们的 em 标签了。em 表示重音: 今天我吃了一个 <em> 苹果 </em>。 今天我吃了 <em> 一个 </em> 苹果。 通过 em 标签,我们可以消除这样的歧义。 一些文章常常会拿 em 和 strong 做对比,实际上,我们只要理解了 em 的真正意思,它和 strong 可谓天差地别,并没有任何混淆的可能。
3、文章结构,语义化的 HTML 能够支持自动生成目录结构,HTML 标准中还专门规定了生成目录结构的算法,即使我们并不打算深入实践语义,也应该尽量在大的层面上保证这些元素的语义化使用。
4、整体结构类的语义标签,可以让页面对机器更友好。比如,这里一个典型的 body 类似这样:
<body> <header> <nav> …… </nav> </header> <aside> <nav> …… </nav> </aside> <section>……</section> <section>……</section> <section>……</section> <footer> <address>……</address> </footer> </body>
是否要语义化:我们应该分开一些场景来看语义,把它用在合适的场景下,可以获得额外的效果。本篇文中,我们至少涉及了三个明确的场景:
自然语言表达能力的补充;
文章标题摘要;
适合机器阅读的整体结构。
![](https://img2022.cnblogs.com/blog/955792/202204/955792-20220406163845188-527443532.png)