除了 SEO 之外,HTML 语义化还有什么用?

每次碰到 HTML 语义化的话题,几乎 99% 的前端都会想到 SEO。那除了 SEO,你还会想到什么呢?好像没有了。。。

确实,当我们要做 SEO 的时候,往往第一时间都会想到优化 HTML 语义化,久而久之,大家都会以为 HTML 语义化只是为了 SEO。

那如果我不需要做 SEO,是不是就可以不需要在意 HTML 语义化了呢?

大部分人就是这么想的,所以都成为了 div boy。

但实际上,对于已经习惯 HTML 语义化的前端开发来说,编写语义化的 HTML 代码都跟 SEO 没什么关系,因为 HTML 语义化还有其他的作用。

让内容更易于被设备识别

SEO 主要是让我们的 HTML 代码更容易被搜索引擎识别。

但其实,不仅是只有搜索引擎需要识别 HTML 语法,还有很多设备或者应用都是兼容 HTML 标签语法的。

就拿我经常使用的编辑器应用 Typora 举例,假设我们有这样一段代码:

我们把 body 的代码 copy 一份,然后在 Typora 编辑器中粘贴,结果长这样:

可以看到,我们的 HTML 代码可以被 Typora 正确识别,并很好地展示出来。

而如果全是 div 会怎样呢?比如我把同样的代码,全部标签替换为 div,像这样:

再来一次,把这份代码粘贴到 Typora,就变成这样了:

先不管断句的问题(我是全局替换标签的)。可以看到,这份内容就非常难阅读了。

很多设备或应用不是浏览器,也不会内置一个浏览器,所以大部分设备或应用都不会兼容 CSS 语法。

但是大部分设备或应用都会兼容 HTML 语法,如果在编写 HTML 代码的时候保持语义化,我们的 HTML 文件就可以被正确识别,美观地展示出来,而且还会被正确地转译到其他语法,比如 Markdown。

让别人更容易阅读我们的 HTML 代码

我们的 HTML 代码除了给设备和应用识别之外,还有很重要的参与角色,那就是你的同事,他们也有可能需要维护这个页面。

因此,我们编写的代码不能只有自己看得懂,还需要让其他维护者能够比较容易看懂我们写的代码,这个就是我们常说的可维护性。

语义化的 HTML 代码就是提升 HTML 代码可维护性的一种有效手段

上面那个例子其实已经能够看到,如果我们的 HTML 代码全是 div,是非常难以阅读的。

可能你会觉得上面的例子还好,还能维护,那再举一个例子:

这是一个真实的代码,当我第一眼看到这个代码的时候,我内心是崩溃的。我唯一庆幸地是,还好我不用维护这份代码。

一份语义化的 HTML 代码,可以给维护者提供很多有用的信息:

  • 页面/组件结构:通过 headernavmainarticlesectionaside等标签可以让维护者快速找到页面的模块划分
  • 重点信息:通过 h 标签可以快速找到标题;通过 ul 快速找到列表等

比如下面这个站点的 HTML 结构,通过 HTML 代码就可以快速了解页面的结构划分。

让自己提升开发效率

除了可以帮助设备或应用识别有用的信息、可以让其他同事更好地维护代码之外,语义化的 HTML 还能让前端开发自己提升开发效率

当我们碰到一个复杂的项目,往往先从整体入手,把整体框架思考清楚,把核心流程捋顺,把模块划分清楚,这个工作就基本已经完成一半了,后面的开发就会变得顺利,开发效率自然就更高了。

开发复杂的页面也是一样的,编写语义化的 HTML 可以让我们更加专注于整个页面的结构和模块划分

从页面整体去思考,这个页面应该划分为多少个模块?

它们的关系是怎样的,是同层级的?还是嵌套的?

页面的交互是怎样的?要实现这个交互,哪些模块是有关联的?页面的模块要怎样划分才能更好地实现这些关联?

当我们把整个页面的 HTML 都写完了,那基本整体结构、模块划分、核心流程就基本胸有成竹了,剩下的 CSS 和 JS 都只是按部就班地填坑就好了。

因此,我会推荐前端开发首先把整个页面的 HTML 都写完,再写 CSS 和 JS。

很多前端同学不是这样开发页面的,他们喜欢一个模块一个模块去开发。

这种开发方式比较容易打断自己的思路,不能让自己的整体思路串联起来。

因为在实现某个模块的时候,我们难免会陷入一些细节内容,这些都是非常消耗心神的,我们不得不全神贯注去应付,这样就会打断我们的整体思路。

另一方面,如果还没想清楚核心流程、交互和模块划分,那我们很可能在开发组件 C 的时候,要去修改已经完成的组件 A 和组件 B,去适应一些组件之间关联的逻辑,这种修改和调整会导致我们的组件代码质量下降,容易出现问题,甚至会出现大面积的返工。

这些问题,都会影响我们的开发效率。

如果你有碰到这种问题,可以尝试我推荐的方法:练习语义化 HTML,先写完整个页面的 HTML 代码。

因此,编写语义化的 HTML,不管是对业务,还是对合作的开发者,还是对前端同学自己,都有非常大的作用。值得我们重视,并花费时间去练习的。

哦,对了,如果你想练习语义化的 HTML 的话,可以来之道前端的原创项目练习!

----------------【END】----------------

如果你是真心喜欢前端,并相信成长,想要提升自己的话,欢迎加入之道前端学习圈子。

戳这里 免费获取 之道前端的学习资料和专属服务。

相关推荐
lapiii3583 分钟前
快速学完React计划(第一天)
前端·react.js·前端框架
苏打水com4 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手14 分钟前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
小潘同学17 分钟前
Vue3中响应式数据深度拷贝 Avoid app logic that relies on,,,,,,,,
前端
六六Leon19 分钟前
Kuikly跨端模式接入资源管理
前端
tianchang23 分钟前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
旺仔牛仔QQ糖24 分钟前
Vue3.0 Hook 使用好用多多
前端
~无忧花开~41 分钟前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D1 小时前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠1 小时前
AJAX的学习
前端·学习·ajax