干了这么多年的前端,之前面试的时候经常会遇到面试官提问:你是如何理解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的语义化的更多相关文章

  1. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  2. html5手册语义化标签

    html5手册语义化标签: article section aside hgroup header footer nav time mark figure figcaption contextmenu ...

  3. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  4. html5新增语义化标签

    注意:body.section.nav 需要h1-h6. div.header则不需要. 1):<article> 显示一个独立的文章内容. 例如一篇完整的论坛帖子,一则网站新闻,一篇博客 ...

  5. 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 说一说你对HTML5语义化的理解

    本题地址:https://github.com/YvetteLau/Step-By-Step/issues/8 语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如he ...

  7. html 语义化 资料

    HTML: The Living Standard 理解HTML语义 什么是HTML语义化 为什么要语义化 写HTML代码时就注意什么 HTML 5的革新——语义化标签(一) header元素 foo ...

  8. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  9. web语义化之SEO和ARIA

    在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...

随机推荐

  1. 通过JS给HTML元素增加、删除和获取属性内容

    1.通过ID或者其他元素找到要处理的HTML对象:(举例通过ID) var obj=document.getElementById('id');12.操作此对象 添加属性:obj.setAttribu ...

  2. centos6一键安装WordPress

    #!/bin/bash service iptables stop setenforce yum -y install httpd service httpd restart yum -y insta ...

  3. smartbi的安装及使用

    http://wiki.smartbi.com.cn/pages/viewpage.action?pageId=42011285

  4. Python学习笔记—条件判断和循环

    条件判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...

  5. python 装饰器 (test = submit(test))

    两层的装饰器,这里对于register不需要进行输入 usename, passwd = 'alex', 'abc123' def register(func): def wrapper(*args, ...

  6. Runtime 源码阅读

    Runtime 属性说明 /** * 每一个 Java 应用程序都有一个关联的运行时对象 * * @author unascribed * @see java.lang.Runtime#getRunt ...

  7. js闭包1

    闭包是函数和声明该函数的词法环境的组合. function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 fun ...

  8. html 网页源码解析:bs4中BeautifulSoup

    from bs4 import BeautifulSoup result=requests.request("get","http://www.baidu.com&quo ...

  9. Jenkins笔录

    1.Linux下安装jdk8的方法 ,只需要一条命令就可以安装jdk: yum install java-1.8.0-openjdk* -y 执行过这条命令无需配置,直接可以使用. 2.JDK12版本 ...

  10. Eclipse 设置护眼背景色

    Eclipse 设置护眼背景色 1.设置字体大小 Window --> Preferences --> General --> Apprearance --> Colors a ...