重学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 元素则直接语义化了,这个是导航。搜索引擎读到之后可以快速了解网站的整体结构。
今天的内容先到这边,还有的部分下一篇继续~
最新文章
- Intent传递List和Object和List<;Object>;
- second class
- androidService总结
- php总结 --- 2.字符串
- linux C学习笔记01--makefile
- ABBYY FineReader 12双十一特价来袭
- django控制admin的model显示列表
- ZOJ 3609 Modular Inverse
- C语言入门(10)——if分支语句
- MySQL入门笔记(一)
- 富文本,NSAttributedString,当需要改变的内容有相同的时候的解决方法
- Linux下安装openvpn
- 201521123087 《Java程序设计》第3周学习总结
- win10 UWP 蜘蛛网效果
- 浅析Python3中的bytes和str类型
- bzoj5342 CTSC2018 Day1T3 青蕈领主
- Android中播放音乐的几种方式
- (9)进程---JoinableQueue队列
- ajax的type为get的时候报405错误,改成post就OK,这是为什么?老师写的get可以请求成功,我的就不行,附图
- HtmlUnit
热门文章
- ccf 201612-4 压缩编码(DP)(100)
- leetcode315 计算右侧小于当前元素的个数
- BFC是什么?有什么作用?
- flutter shared_preferences 异步变同步
- sql中对查询出的某个字段转换查询
- SqlServer Where后面Case When的使用实例
- 阶段3 3.SpringMVC&#183;_06.异常处理及拦截器_5 SpringMVC拦截器之编写controller
- 六十八:flask上下文之app上下文和request上下文
- JAVA文件上传 ServletFileUpLoad 实例
- ubuntu查看目录大小