web 语义化
什么是 web 语义化
答:
- Web 语义化是指使用恰当语义的 html 标签、class 类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。语义化的 web 页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用;另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器(如果访客有视障)能够读懂内容。
简单来说就是利于 SEO,便于阅读维护理解。
总结起来就是:
HTML 语义化标签
HTML 为网页文档内容提供上下文结构和含义。对于 HTML 体系而言,Web 语义化是指使用语义恰当的标签,使页面有良好的结构,让页面元素有含义,便于被浏览器、搜索引擎解析、利于 SEO。通常我们所说的 HTML 应该是完全脱离表现信息的,其中的标签应该都是语义化地定义了文档的结构。
CSS 语义化
CSS 语义就是 class 和 ID 命名的语义。
class 属性作为 HTML 与 CSS 衔接的纽带,其本意是用来描述元素内容的。指用易于理解的名称对 html 标签附加的 class 或 id 命名。如果说 HTML 语义化标签是给机器看的,那么 CSS 命名的语义化就是给人看的。
良好的 CSS 命名方式减少沟通调试成本,易于理解。
补充
补充:语义化看起来是"为了好看",实际上是为了让搜索引擎、屏幕阅读器、未来的自己都能看懂。
一句话理解
"用对的标签做对的事"——标题用 <h1>、段落用 <p>、强调用 <strong>、导航用 <nav>,而不是一切都用 <div> + class。
常见语义化标签
| 标签 | 用途 |
|---|---|
<header> / <footer> | 页头 / 页脚 |
<nav> | 导航 |
<main> | 页面主体 |
<article> | 独立文章 |
<section> | 主题分组 |
<aside> | 侧边栏 / 与主体相关性较弱 |
<figure> / <figcaption> | 图片与说明 |
来源整理自:我的有道云笔记



