web前端：重学HTML5的语义化

　　语义化的(X)html文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。

　　干了这么多年的前端，之前面试的时候经常会遇到面试官提问：你是如何理解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元素则直接语义化了，这个是导航。搜索引擎读到之后可以快速了解网站的整体结构。

　　语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.