web前端标签语义化

什么是标签语义化

标签语义化：是为了让机器人（浏览器，搜索引擎，以及各种设备）能精准、高效、对代码数据进行分/理处。

Web 规模的不断扩大，信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容，搜索引擎就诞生了。再后来，人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要。

html语义化的背景

HTML结构语义化，是最近几年才提出来的，以前的html结构，都是一堆的没有语义的冷冰冰的标签。最泛滥的就是div+css,以前的页面，你一打来就是一堆的div+css, 为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方w3c，也在HTML5给出了几个新的语义化的标签。（header 头, nav 导航, section 区块, article 文章, aside 侧边栏 , and footer 页尾）

HTML 规范其实一直在往语义化的方向上努力，许多元素、属性在设计的时候，就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解 HTML 文档。HTML5 更是在之前规范的基础上，将所有表现层（presentational）的语义描述都进行了修改或者删除，增加了不少可以表达更丰富语义的元素。

语义本身就是对符号的一种共识，被认可的程度越高、范围越广，人们就越可以依赖它实现各种各样的功能。

为什么要标签语义化

1、为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂一二。（其实，就是为了不穿CSS外衣，裸奔依然好看）。

2、提高用户体验，比如：title，alt用于解释名词和图片信息。

3、利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。

4、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

5、便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，利于规范化。

标签语义化的体现

①...

②

③

④

不要使用纯样式标签，例如b、font 和u 等，改用CSS 设置。语义上需要强调的文本可以包在strong 或em 标签里，strong 和em 有“强调”的语意，其中strong 的默认样式是加粗，而em 的默认样式是斜体。

是用于表现样式的就应该写在CSS样式表中，是用于结构体现的就写在html结构中。真正意义上实现："样式与结构分离。"

如何判断网页标签语义是否良好

去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。