干了这么多年的前端,之前面试的时候经常会遇到面试官提问:你是如何理解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. STL priority_queue

    priority_queue 优先队列(Priority Queues):顾名思义,一个有着优先级的队列.它是一种ADT,和队列的思想差不多—— 排队,数据结构中的队列是不能插队的,不能颠倒排队的顺序 ...

  2. ipv4 ipv6 求字符串和整数一一映射的算法 AmazonOrderId

    字符串和整数一一映射的算法 公司每人的英文名不同,现在给每个英文名一个不同的数字编号,怎么设计? 走ipv4/6  2/32 2/128就够了,把“网段”概念对应到“表或库”,ip有a_e5类,这概念 ...

  3. SQLServer 简单数据拆分

    --1. 旧的解决方法(sql server 2000)   create table tb(id int,value varchar(30)) insert into tb values(1,'aa ...

  4. (转)js控制窗口失去焦点(包括屏蔽Alt+Tab键切换页面)

    本章内容转自:http://www.cnblogs.com/BoKeYuanVinson/articles/3360954.html 转载自网络贴吧: 页面脚本是无法截获alt键的,不过可以变通一下, ...

  5. 解决 JDK1.7 不支持 VCenter 6.7 的问题(涉及到Https TLS1.2协议)

    解决 JDK1.7 不支持 VCenter 6.7 的问题 问题描述 原项目工程是使用JDK 1.7,可以连接 5.X版本和 6.0版本的 VCenter资源池. 但是,现在VCenter已经升到 6 ...

  6. 2019.12.24 【ABAP随笔】smartforms 打印及PDF转化

    冬至已过,又临平安夜和圣诞,又是一年的末尾,闲暇时间需要静下心来温故而知新. 许久未碰打印,知识于脑子又有几分糊涂,遂整理些许知识,记录. 数据随便取于物料表 report Z_smartforms ...

  7. HTML <canvas> 学习笔记

    Professional JavaScript for Web Developers    P552 Basic Usage The <canvas> element requires a ...

  8. MSSQL数据库日志满的快速解决办法

    先提供一种复杂的方法压缩日志及数据库文件如下:   1.清空日志 DUMP TRANSACTION 库名 WITH NO_LOG  2.截断事务日志: BACKUP LOG 数据库名 WITH NO_ ...

  9. PTA --- 天梯赛 L1-059 敲笨钟

    L1-059 敲笨钟 (20 point(s)) 微博上有个自称“大笨钟V”的家伙,每天敲钟催促码农们爱惜身体早点睡觉.为了增加敲钟的趣味性,还会糟改几句古诗词.其糟改的方法为:去网上搜寻压“ong” ...

  10. C#作业系统中的安全系统

    比赛条件 编写多线程代码时,总是存在竞争条件的风险.当一个操作的输出取决于其控制之外的另一个过程的定时时,发生竞争条件. 竞争条件并不总是一个错误,但它是不确定行为的来源.当竞争条件确实导致错误时,可 ...