重学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的语义化的更多相关文章
- 浅谈html语义化标签,Html5新增语义化标签
Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...
- html5手册语义化标签
html5手册语义化标签: article section aside hgroup header footer nav time mark figure figcaption contextmenu ...
- HTML5之语义化标签
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- html5新增语义化标签
注意:body.section.nav 需要h1-h6. div.header则不需要. 1):<article> 显示一个独立的文章内容. 例如一篇完整的论坛帖子,一则网站新闻,一篇博客 ...
- 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 说一说你对HTML5语义化的理解
本题地址:https://github.com/YvetteLau/Step-By-Step/issues/8 语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如he ...
- html 语义化 资料
HTML: The Living Standard 理解HTML语义 什么是HTML语义化 为什么要语义化 写HTML代码时就注意什么 HTML 5的革新——语义化标签(一) header元素 foo ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.” Web语义化有三个阶段: 1.h1~h6.thead.ul. ...
- web语义化之SEO和ARIA
在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...
随机推荐
- 通过JS给HTML元素增加、删除和获取属性内容
1.通过ID或者其他元素找到要处理的HTML对象:(举例通过ID) var obj=document.getElementById('id');12.操作此对象 添加属性:obj.setAttribu ...
- centos6一键安装WordPress
#!/bin/bash service iptables stop setenforce yum -y install httpd service httpd restart yum -y insta ...
- smartbi的安装及使用
http://wiki.smartbi.com.cn/pages/viewpage.action?pageId=42011285
- Python学习笔记—条件判断和循环
条件判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...
- python 装饰器 (test = submit(test))
两层的装饰器,这里对于register不需要进行输入 usename, passwd = 'alex', 'abc123' def register(func): def wrapper(*args, ...
- Runtime 源码阅读
Runtime 属性说明 /** * 每一个 Java 应用程序都有一个关联的运行时对象 * * @author unascribed * @see java.lang.Runtime#getRunt ...
- js闭包1
闭包是函数和声明该函数的词法环境的组合. function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 fun ...
- html 网页源码解析:bs4中BeautifulSoup
from bs4 import BeautifulSoup result=requests.request("get","http://www.baidu.com&quo ...
- Jenkins笔录
1.Linux下安装jdk8的方法 ,只需要一条命令就可以安装jdk: yum install java-1.8.0-openjdk* -y 执行过这条命令无需配置,直接可以使用. 2.JDK12版本 ...
- Eclipse 设置护眼背景色
Eclipse 设置护眼背景色 1.设置字体大小 Window --> Preferences --> General --> Apprearance --> Colors a ...