HTML 语义化

问题

什么是 HTML 语义化？它对 SEO 和代码可读性有什么影响？

解答

HTML 语义化是指使用具有明确含义的标签来描述内容，让标签名本身就能表达内容的结构和意义。

非语义化 vs 语义化

<!-- 非语义化写法 -->
<div class="header">
  <div class="nav">
    <div class="nav-item">首页</div>
    <div class="nav-item">关于</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">文章标题</div>
    <div class="content">文章内容...</div>
  </div>
  <div class="sidebar">侧边栏</div>
</div>
<div class="footer">页脚</div>

<!-- 语义化写法 -->
<header>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
  </nav>
</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容...</p>
  </article>
  <aside>侧边栏</aside>
</main>
<footer>页脚</footer>

常用语义化标签

<!-- 页面结构 -->
<header>页头</header>
<nav>导航</nav>
<main>主要内容（页面唯一）</main>
<aside>侧边栏</aside>
<footer>页脚</footer>

<!-- 内容分区 -->
<article>独立的文章内容</article>
<section>文档中的章节</section>

<!-- 文本语义 -->
<h1> ~ <h6>  <!-- 标题层级 -->
<p>段落</p>
<strong>重要文本（语义强调）</strong>
<em>强调文本（语气强调）</em>
<mark>标记/高亮文本</mark>
<time datetime="2024-01-01">2024年1月1日</time>

<!-- 其他 -->
<figure>
  <img src="image.jpg" alt="图片描述">
  <figcaption>图片说明</figcaption>
</figure>
<address>联系信息</address>

对 SEO 的影响

搜索引擎爬虫通过标签理解页面结构：

<!-- 搜索引擎能识别这是文章标题 -->
<h1>如何学习前端开发</h1>

<!-- 搜索引擎只知道这是个 div -->
<div class="title">如何学习前端开发</div>

• <h1> 告诉搜索引擎这是页面主标题
• <article> 表明这是独立的内容块
• <nav> 帮助爬虫识别导航链接
• <time> 让搜索引擎理解时间信息

对可读性的影响

<!-- 看代码就能理解结构 -->
<article>
  <header>
    <h2>文章标题</h2>
    <time>2024-01-01</time>
  </header>
  <p>正文内容</p>
  <footer>
    <address>作者信息</address>
  </footer>
</article>

不需要看 class 名就能理解页面结构，维护成本更低。

对无障碍访问的影响

屏幕阅读器依赖语义化标签为视障用户导航：

• <nav> 会被识别为导航区域
• <main> 让用户快速跳转到主要内容
• <button> 可被键盘聚焦和操作

关键点

• 语义化是用标签名表达内容含义，而不是只用 div + class
• 有利于 SEO，搜索引擎能更好理解页面结构和内容权重
• 提高代码可读性，看标签就知道内容结构
• 支持无障碍访问，屏幕阅读器依赖语义标签导航
• <strong> 和 <b> 的区别：前者有语义（重要），后者只是样式（加粗）