江苏龙网

  1. 主页 > 生活百科 > >

重学HTML5的语义化

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 元素则直接语义化了 ， 这个是导航 。搜索引擎读到之后可以快速了解网站的整体结构 。

【重学HTML5的语义化】


    推荐阅读


    上一篇：茶艺茶苗移栽技术

    下一篇：茶道步骤操作流程