语义化 HTML：让结构表达含义

语义化 HTML 的目标不是使用更多标签，而是让元素准确表达内容承担的职责。

为什么语义重要

浏览器可以把任何元素渲染成相似的视觉效果，但辅助技术和搜索引擎依赖文档结构理解页面。正确的标签还能让团队成员更快读懂代码。

<header>
  <nav aria-label="主导航">...</nav>
</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>正文内容</p>
  </article>
</main>

选择标签的方法

先问这个内容在页面中的角色，再考虑样式：

1. 它是否构成页面的主要内容？使用 main。
2. 它能否独立分发或复用？考虑 article。
3. 它是否是一组页面导航？使用带标签的 nav。
4. 它只是没有语义的布局容器？此时才使用 div。

常见误区

不要为了“语义化”把所有容器换成 section。没有标题、也不形成独立主题的布局块，通常仍然应该使用 div。

语义来自内容职责，而不是标签看起来是否更专业。