web语意化的深入理解

简述

    Web 语义化是指使用恰当语义的 HTML 标签、Class 类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的 Web 页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。简单来说就是利于 SEO（搜索引擎优化），便于阅读维护理解。

    Web 语义化包含了 HTML 标签的语义化和 Css 命名的语义化

HTML语义化

    HTML 为网页文档内容提供上下文结构和含义。对于 HTML 体系而言，Web 语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于 SEO。通常我们所说的 HTML 应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。

    HTML 语义化标签包括 body，article，nav，aside，section，header，footer，hgroup，还有 h1 - h6，address等

CSS语义化

    CSS语义就是class和ID命名的语义。Class 属性作为 HTML 与 CSS 衔接的纽带，其本意是用来描述元素内容的。指用易于理解的名称对html标签附加的 Class 或 id 命名。如果说 HTML 语义化标签是给机器看的，那么 CSS 命名的语义化就是给人看的。良好的 CSS 命名方式减少沟通调试成本，易于理解。

    CSS 命名首先要满足 W3C 的命名规范和团队的命名规范。其次是高效和可重用性

语义化的好处

    1. 有利于 SEO，因为搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重

    2. 方便其他设备解析，以有意义的方式来渲染网页

    3. 去掉或者丢失样式的时候，页面也能呈现出很好的内容结构

    4. 便于团队开发和维护，语义化更具有可读性