HTML5语义标签怎么用？新手布局必学

一分耕耘，一分收获！既然打开了这篇文章《HTML5语义化标签怎么用？新手必学布局技巧》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

header是页面或区块头部容器，nav专指主导航链接集合；article须独立可分发；section需带标题才具语义；正确语义标签提升SEO与无障碍访问。

header 和 nav 别混着用，语义错位会导致 SEO 和屏幕阅读器误读

header 是「页面或区块的头部内容容器」，不是「网站顶部导航栏专用标签」；nav 才专指「主导航链接集合」。常见错误是把整个顶部栏（logo + 搜索框 + 用户菜单 + 导航条）全塞进一个 header 里却不拆出 nav，这会让辅助技术无法识别可跳转的导航区域。

正确做法是：

• 每个独立内容区块（如文章、侧边栏）可以有自己的 header，不只限于页面最上方
• 只要是一组用于站点内跳转的链接（比如顶部主菜单、页脚分类链接），就该用 nav 包裹，哪怕它在 header 内部
• header 里可以没有 nav（比如纯标题+副标题），nav 也可以不在 header 里（比如底部导航）

article 必须能独立分发，别把广告位或通用侧边栏塞进去

article 表示「可独立存在、可被单独订阅或重用的内容」，典型例子是博客正文、新闻稿、论坛帖子。它的核心判断标准是：把这段 HTML 单独拿出来，贴到另一个网站或 RSS 阅读器里，是否仍有完整意义？

容易踩的坑：

• 用 article 包裹整页布局（如首页所有栏目），违反「独立性」原则
• 在 article 内硬塞 aside 广告位，但广告本身不属于该文章内容——应把广告移出 article，或改用 section + div
• 列表页（如「最新 10 篇文章」）中，每个条目用 article，但整个列表本身用 main 或 section，而非再套一层 article

嵌套要讲逻辑层级，section 不是 div 的语义马甲

section 表示「有主题的文档区块」，必须带标题（h1–h6），否则语义失效。它不是为了替代 div 而生的「高级容器」，没标题就该用 div。

典型结构示例：

<main>
  <article>
    <header>
      <h1>如何用 fetch 发起 POST 请求</h1>
      <p>发布于 2024-03-15</p>
    </header>
    <section>
      <h2>基础用法</h2>
      <p>需要设置 body 和 headers...</p>
    </section>
    <section>
      <h2>常见错误</h2>
      <p>忘记 stringfy 数据会报 400...</p>
    </section>
  </article>
</main>

注意：section 的 h2 是它自己的标题，不是 article 的子标题——它们共同构成文档大纲（outline），浏览器和读屏软件靠这个生成导航树。

兼容性不用怕，但 aria-label 和 role 要补在关键位置

所有主流浏览器都支持 header、nav、article、section，IE9+ 也基本可用。真正影响体验的是语义缺失后的降级行为：比如老版本读屏器可能忽略 nav，但加上 role="navigation" 就能识别。

实操建议：

• nav 标签默认已带 role="navigation"，无需重复写；但如果你用 div 模拟导航（不推荐），就必须手动加
• article 对应 role="article"，同样内置，不用额外加
• 如果某个 section 主题不够明确（比如「相关推荐」模块），建议加 aria-label="相关文章" 辅助说明

语义标签的价值不在视觉，而在 DOM 结构的可解析性——写对了，调试时看 Elements 面板就能一眼看出内容骨架，而不是满屏 div 套娃。

终于介绍完啦！小伙伴们，这篇关于《HTML5语义标签怎么用？新手布局必学》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！