以掘金的的网页源代码为例:
具有结构化、语义化的网页是这样的:
给大家看看没有结构化的文档:
这是因为没有元素给内容结构,所以浏览器不知道什么是标题,什么是段落。
再看看没有语义化的文档代码:
<span style="font-size: 32px; margin: 21px 0; display: block;"
>这是顶级标题吗?</span>
<span>这是段落内容吗?</span>
对比掘金的网页源代码,是不是感觉这样的代码杂乱、没有重点,让人看起来很吃力。
为什么需要结构化、语义化?
这时候我们再问问自己,为什么我们需要具有结构化、语义化的网页?
- 浏览网页时,无法在最短的时间内,获取最想要的信息。
- 没有标题,网页在搜索引擎优化方面效果不佳。
对网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。
- 给视力障碍者提供便利。严重视力障碍者通常不会阅读网页;他们用听力来代替。完成这项工作的软件叫做屏幕阅读器
为了强调重要的词,在口语方面我们往往用重音强调,在书面用语中则是用粗体字来达到强调的效果。
重要的信息会大声朗读,重读。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中,它们通过朗读标题来提供文档的概述,让用户能快速找到他们需要的信息。如果标题不可用,用户将不得不听到整个文档被大声朗读。
- 使用 CSS 样式化内容,或者使用 JavaScript 做一些有趣的事情,你需要包含相关内容的元素,使得 CSS / JavaScript 可以有效地定位它。
- 对于开发者而言,能够更好地阅读其他人的源码。采用同一套语义化体系能够为后续更新迭代做铺垫。
我们需要确保使用了正确的元素来给予内容正确的含义、作用以及外形。不正确地使用元素,可能导致代码可读性差,意义有偏差。
例如:
- 我真的很抱歉,我迟到了。
- 我真的很抱歉,我迟到了。
这两段话表达出来的感觉就完全不一样。强调的地方如果重读了,就好像在挑衅别人一样,很欠揍。
以上便是读者结合(HTML 文本处理基础 - 学习 Web 开发 | MDN (mozilla.org))与字节青训营课程加上自己的理解消化的知识笔记。