我爱编程

谈谈HTML语义化

2018-03-17  本文已影响53人  抱着熊喵啃什么

随着HTML5的普及,越来越多的新标签被加入到HTML里,HTML语义化越来越被重视,所以想写篇文章学习整理一下关于HTML语义化的相关知识。

HTML语义化的含义

Tim Berners-Lee(万维网发明者)最早提出了语义网(Semantic Web)的概念,而语义网的核心是通过给万维网上的文档(如HTML)添加能够被计算机所理解的元数据(Meta data),从而使整个互联网成为一个通用的信息交换媒介。

其实简单说来就是让机器可以读懂内容。

为什么要语义化

对于当前的 Web 而言,HTML 是联系大多数 Web 资源的纽带,也是内容的载体,人们开始用机器来处理网络信息,就此诞生了搜索引擎。而如此庞大及复杂的信息如何让搜索引擎处理和挖掘,所以让机器能够更好地读懂WEB上内容就变得越来越重要。

传统的Web由文档组成,W3C希望通过一组技术支撑“数据的Web”,即Web of Data,将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环,帮助人们创建数据并存储在Web上,创建相关的词汇表及数据的处理规则。 —— w3.org

既然W3C有如此雄心为我们规划未来语义网,我们开发者作为W3C的坚定追随者还有什么理由不跟着大步迈进呢?

语义网的基础必然是语义化的结构网页

此外,语义化可以带来许多好处:

去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。

屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容,而不是一个字母一个字母的拼写出来。

和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

在团队中大家都遵循同一个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

如何语义化

如本文开头所说,语义化随着HTML5的执行而受到了更大的关注,显然,正确理解HTML的作用才是更好实现语义化的基础。

一个页面通常由HTML、CSS和Javascript组成,而其中HTML的作用正如一栋建筑的结构骨架,CSS装饰其外表,JS实现其功能。

HTML在页面中的作用就是结构和含义,通俗点说就是划分内容,这里放什么,我们放的是什么。

结构(HTML)才是重点,样式(CSS)是用来修饰结构的。

所以要先确定HTML标签,再来选用合适的CSS样式。布局的标签是通过HTML内在的上下文语境来决定当前的语义化的结构,而不是通过外在的样式表现来决定能衬托的标签。

一些语义化实用建议

根据文档上下文结构合理的选用最适合表达当前语义的标签;

参考链接: 谈谈对HTML语义化的理解-Haizhou's Blog

上一篇 下一篇

猜你喜欢

热点阅读