重学HTML5的语义化

干了这么多年的前端，之前面试的时候经常会遇到面试官提问：你是如何理解html的语义化的？

说实话，之前遇到这个问题的时候，都是从网上找参考答案，然后记下来，用自己的语言重新组织一下，就变成自己的理解了。

为什么说要重学HTML5的语义化，是因为今年以来，公司安排了一项任务给我，让我做一个自项目的官网，然后希望能在百度搜索中排名尽可能排到首页上去。

做官网，对我来说，那是相当容易，我可以说出来好几种方案，react的，vue的，jquery的，或者什么框架都不用的。都能实现。而且事实上，我也很快就完成了这项工作。但是在后续的百度搜索排名上倒是遇到了一些问题。

其实这个属于 seo 的工作范畴了，没办法，公司又不可能特意再雇佣一位 SEO 专家来给这个子项目专门做 SEO 的。

我经过查找各种资料，各种博客（推荐：SEO与HTM的联系），各种论坛，总算最后效果还不错。

下面说说语义化到底是什么？

1. Headings

Headings 其实就是我们常见的 h1, h2, h3 这些标签，其中 h1 应该是一个网页的标题，其实类比到 word 文档中，就是一个 Word 文档中的标题。

网页中的 Headings 数量及结构应该是依次展开的，就像 Word 文档一样，标题结构如果清晰的话。那么这个文档内容一定是易读的，而网页的 Headings 如果合理，那么同样这对于搜索引擎爬虫来说也是友好的。

2. List

我们做前端的，最喜欢将 ul、ol这些原始的样式消除掉，搞一些其他的样式。或者应该用他们的时候，会使用 div 来实现。

最终展示效果可能没啥区别，但是对于搜索引擎来说，区别大了去了。ol和ul的本意是有序列表和无序列表，搜索引擎在读到他们的时候，会将他们的子元素都归为同一级别，属于同一个 List 的。

3. Nav

我在做这个官网的时候，导航一开始就是用 div 实现的。其实这是不对的，因为用 div 元素是没有办法说明这个节点是导航菜单节点的。而 Nav 元素则直接语义化了，这个是导航。搜索引擎读到之后可以快速了解网站的整体结构。