HTML 语义化

约 452 字大约 2 分钟

2026-04-01

思考

什么是HTML 语义化？

HTML 语义化 是指根据内容的结构化意义，选择最恰当的 HTML 标签来包裹内容。

简单来说：让代码可读性更强，让机器（浏览器、搜索引擎、屏幕阅读器）更容易理解内容。

非语义化：全是 <div> 和 <span>，机器不知道哪里是标题，哪里是导航。 语义化：用 <header> 表示头部，<nav> 表示导航，<h1> 表示主标题等。

好处	说明
SEO 优化	搜索引擎爬虫依赖标签权重（如 `<h1>` 权重高于 `<div>`），语义化有助于提高排名。
无障碍访问 (A11y)	屏幕阅读器（视障人士使用）依赖语义标签朗读页面结构（如“跳转到导航”、“这是文章”）。
代码可维护性	开发者阅读代码时，看到 `<article>` 就知道是文章，比 `<div class="article">` 更直观。
结构清晰	即使 CSS 加载失败，页面依然保持良好的文档结构轮廓。