每次碰到 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 代码，可以给维护者提供很多有用的信息：
- 页面/组件结构：通过
header，nav，main，article，section，aside等标签可以让维护者快速找到页面的模块划分 - 重点信息：通过
h标签可以快速找到标题；通过ul快速找到列表等
比如下面这个站点的 HTML 结构，通过 HTML 代码就可以快速了解页面的结构划分。
让自己提升开发效率
除了可以帮助设备或应用识别有用的信息、可以让其他同事更好地维护代码之外，语义化的 HTML 还能让前端开发自己提升开发效率。
当我们碰到一个复杂的项目，往往先从整体入手，把整体框架思考清楚，把核心流程捋顺，把模块划分清楚，这个工作就基本已经完成一半了，后面的开发就会变得顺利，开发效率自然就更高了。
开发复杂的页面也是一样的，编写语义化的 HTML 可以让我们更加专注于整个页面的结构和模块划分。
从页面整体去思考，这个页面应该划分为多少个模块？
它们的关系是怎样的，是同层级的？还是嵌套的？
页面的交互是怎样的？要实现这个交互，哪些模块是有关联的？页面的模块要怎样划分才能更好地实现这些关联？
当我们把整个页面的 HTML 都写完了，那基本整体结构、模块划分、核心流程就基本胸有成竹了，剩下的 CSS 和 JS 都只是按部就班地填坑就好了。
因此，我会推荐前端开发首先把整个页面的 HTML 都写完，再写 CSS 和 JS。
很多前端同学不是这样开发页面的，他们喜欢一个模块一个模块去开发。
这种开发方式比较容易打断自己的思路，不能让自己的整体思路串联起来。
因为在实现某个模块的时候，我们难免会陷入一些细节内容，这些都是非常消耗心神的，我们不得不全神贯注去应付，这样就会打断我们的整体思路。
另一方面，如果还没想清楚核心流程、交互和模块划分，那我们很可能在开发组件 C 的时候，要去修改已经完成的组件 A 和组件 B，去适应一些组件之间关联的逻辑，这种修改和调整会导致我们的组件代码质量下降，容易出现问题，甚至会出现大面积的返工。
这些问题，都会影响我们的开发效率。
如果你有碰到这种问题，可以尝试我推荐的方法：练习语义化 HTML，先写完整个页面的 HTML 代码。
因此，编写语义化的 HTML，不管是对业务，还是对合作的开发者，还是对前端同学自己，都有非常大的作用。值得我们重视，并花费时间去练习的。
哦，对了，如果你想练习语义化的 HTML 的话，可以来之道前端的原创项目练习！
----------------【END】----------------
如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。
戳这里 免费获取 之道前端的学习资料和专属服务。
