HTML语义化

Akii7

于 2021-05-13 10:39:28 发布

阅读量208

点赞数

文章标签： html html5 前端

本文链接：https://blog.csdn.net/cheng_09/article/details/116740253

版权

HTML语义化

关于语义

语义是对标记与符号之间的关系，以及它们的含义的研究。在前端web开发的上下文中，语义大多是与元素，属性，和属性值（包括像Microdata之类的扩展）的一致认同意义相关。这些认同意义通常在规范中被定义概念，它们可以帮助程序员更好地理解网站中信息的不同方面。但是，即使是规范化之后，元素、属性、属性值的语义还是受制于开发者对其的适应和吸收。这可能会导致后续对正式认同语义的修改。

什么是语义化？语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CSS期刊下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

区分不同类型的HTML语义

编写 “语义HTML” 原则是现代专业前端开发的基础之一。

尽管在HTML5 specification section on classes 重复的认为“最佳的实践” 如下…

…作者鼓励用 [class attribute] 值来描述内容的显示，而不是描述的内容所需的表现值。

没有理由这样做。事实上，它往往是大型网站或应用程序工作时的一个障碍。

内容层语义已经担任HTML元素和其他属性。
类名很少或根本没有赋予语义有用的信息给计算机或浏览，除非它的一小部分（计算机可读）约定的名字 - 微格式的部分。
类名称的主要目的是为CSS和JavaScript设置钩子。如果你不需要给你的web文档添加演示和行为，那么你可能不需要在你的HTML文件中使用classes。
类名应该提供有用的信息给开发商。当你读一个DOM代码段的时候，有助于了解一个特定的类的名字是要干什么，特别是在前期与多个开发团队，包括非HTML组件工作的人。

简单举例：

<div class="news">
    <h2>News</h2>
    [news content]
</div>

从上面的例子很明显的看出，类名news并没有告诉你任何内容。它没给你组件的组织结构的任何信息，它不能用于说明内容是不是“新闻”。类名的语义与内容的性质已经减少的关联，架构功能已经变小，或者也很容易让其他开发者使用。

web语义化

HTML规范其实一直在往语义化的方向上努力，许多元素、属性在设计的时候，就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解HTML文档。HTML5更是在之前规范的基础上，将所有表现层（presentational）的描述都进行了修改或者删除，增加了不少可以表达更丰富语义的元素。为什么这样的语义元素是有意义的？因为它们被广泛认可。所谓语义本身就是对符号的一种共识，被认可的程度越高、范围越广，人们就越可以依赖它实现各种各样的功能。

HTML5并非web语义唯一倚仗的规范，除了W3C和WHATWG之外，还有其他的组织在扩展、标准化Web语义做贡献。只要有浏览器厂商、搜索引擎愿意支持，他们的规范一样可以成为通用的基础设施。