HTML 语义化

问题

什么是 HTML 语义化，为什么要使用语义化标签？

解答

什么是 HTML 语义化

HTML 语义化是指用合适的标签来标记内容的结构和含义，而不是仅仅通过样式来展示结构。

HTML 本身是用来结构化信息的标记语言，例如用 <h1> 表示标题、<p> 表示段落、<strong> 表示强调等。这些标签本身就带有语义，能够清晰地表达内容的含义。

浏览器会为这些标签提供默认样式，但这只是为了在没有 CSS 的情况下友好地展示页面。语义化的核心是让代码本身就能表达内容的结构和含义。

语义化 vs 非语义化

<!-- 非语义化：全用 div -->
<div class="header">
  <div class="title">文章标题</div>
</div>
<div class="content">
  <div class="paragraph">这是一段文字</div>
</div>

<!-- 语义化：使用合适的标签 -->
<header>
  <h1>文章标题</h1>
</header>
<article>
  <p>这是一段文字</p>
</article>

虽然通过 CSS 可以让两者看起来一样，但语义化的代码能让人和机器都更容易理解页面结构。

为什么要使用语义化标签

对搜索引擎友好：搜索引擎爬虫能更好地理解页面内容，有利于 SEO 优化和内容索引。

对无障碍设备友好：屏幕阅读器等辅助设备能够正确解析页面结构，帮助视障用户理解内容。

提高代码可读性：团队成员能够快速理解页面结构，降低维护成本。

样式丢失时的降级体验：当 CSS 文件加载失败时，语义化的页面仍然能保持清晰的结构，比全是 div 的页面更易读。

关键点

• 语义化是用合适的标签标记内容，让代码本身表达结构和含义
• 使用 <header>、<nav>、<article>、<section> 等语义化标签，而不是全用 <div>
• 有利于 SEO、无障碍访问和团队协作
• 样式丢失时仍能保持良好的可读性