简述

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. 便于团队开发和维护，语义化更具有可读性

web语意化的深入理解相关推荐

【semantic】如何理解 web 语义化？
http://www.zhihu.com/question/20455165 顾轶灵,百度前端工程师 http://Lync.in 什么是语义化?其实简单说来就是让机器可以读懂内容. 先随便扯扯.对 ...
表现与数据分离、web语义化的理解
2019独角兽企业重金招聘Python工程师标准>>> 表现与数据分离什么是表现与数据分离一是前后端分离,所有数据都是后端通过AJAX发送给前端,前端负责展现页面,后端负责提供数 ...
谈谈你对web语义化的理解
学术届将web语义化称为Web3.0的核心,目标是将当前的网页提升为计算机能够"理解"和处理的网页. 核心思想是标注网页对象使其对应本体中的实体,并通过逻辑等手段进行自动推理. 作 ...
Web语义化的理解（H5语义化的作用）
Web语义化,简而言之,就是用正确的标签做正确的事. HTML语义化让页面内容更加结构化,结构更清晰,便于浏览器,搜索引擎解析.语义化让文档更易读,搜索引擎的爬虫也依赖HTML标记来确定上下文和各个关 ...
好程序员web前端分享：如何理解web语义化?
首先,在理解之前,我们需要先了解,什么是语义化.所谓语义化,简单来说,就是能够更清晰,更直观的理解语言所要表达的含义,所谓词必达意就是这个意思.那么在开发过程中的语义化指的是什么呢?就是能够让除了当事 ...
深入浅出的web语义化理解
写目录前言一:什么是语义元素? 二:为什么要语义化? 三:常用的语义元素四:文档结构标签五:参考前言很多面试官会问: 谈谈你对 HTML5语义化标签的理解. 那么本篇博客可以对你理解HTM ...
前端基础：web语义化
web语义化一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...
[html] 说说你对WEB标准和W3C的理解与认识？
[html] 说说你对WEB标准和W3C的理解与认识? 网页主要由三个部分组成,表现.结构和行为.我理解的就是:html是名词--表现 css是形容词--结构 javascript是动词--行为以上 ...
充分了解Web语义化
前言对于"web语义化"这个词语,我相信只要是从事前端的人都不陌生,从事前端工作在投简历时都会在招聘需求里面看到这句话:"对web语义化有深刻的理解",当然我 ...

web语意化的深入理解

简述

HTML语义化

CSS语义化

语义化的好处

web语意化的深入理解相关推荐

最新文章

热门文章