正确使用这7个HTML5语义标签，提升网站可用性

html5语义化标签不是装饰品，而是为网站提供清晰结构的工具。很多开发者随意使用这些标签，导致屏幕阅读器无法正确识别、搜索引擎难以理解页面结构、css样式变得脆弱。问题不在于使用div标签，而在于错误地使用了语义化元素。

1. main标签：每个页面只用一个

常见错误：一个页面使用多个main标签，或者把main标签嵌套在其他布局容器里。

为什么不能这样用：屏幕阅读器会直接跳转到main标签内容，跳过页面头部。如果出现多个main标签或嵌套使用，会破坏这个跳转功能。

正确写法：

<body>
  <header>网站头部</header>
  <nav aria-label="主导航">...</nav>

  <main id="main-content">
    <!-- 这里是页面的主要内容 -->
  </main>

  <footer>网站底部</footer>
</body>

使用规则：

每个页面只能有一个main标签
不要放在article、aside、header、footer、section标签里面
如果提供"跳过到主要内容"功能，给main标签一个固定的id

2. section标签必须配合标题使用

常见错误：把section标签当作高级版的div标签使用。

后果：没有标题的内容区块会破坏文档结构，导致屏幕阅读器导航混乱。

正确写法：

<section aria-labelledby="payment-heading">
  <h2 id="payment-heading">支付方式</h2>
  <p>更新您的付款信息。</p>
</section>

如果某个区块没有合适的标题，就应该使用div标签。

3. article标签：独立完整的内容单元

常见错误：随意将页面区块包在article标签里。

后果：article标签向搜索引擎和无障碍工具声明：这个内容可以独立存在（比如出现在订阅流或邮件里）。

适合使用article的场景：

博客文章、新闻报道
论坛帖子、产品评论
更新日志条目

正确写法：

<article>
  <header>
    <h1>版本2.1发布</h1>
    <p>由开发团队发布</p>
  </header>

  <p>我们新增了键盘快捷键并改进了搜索功能。</p>

  <footer>
    <a href="#comments">12条评论</a>
  </footer>
</article>

判断标准：如果这个内容离开当前页面仍然有意义，就用article标签；否则使用section或div标签。

4. header标签：不仅限于网站顶部

常见错误：只在网站顶部使用header标签。

后果：文章或区块内部失去了组织标题和引言的结构机会。

可以在article或section内部使用header标签：

<article>
  <header>
    <h2>键盘快捷键</h2>
    <p>使用这些快捷键每天节省几分钟时间。</p>
  </header>
  <p>按"?"键打开快捷帮助面板。</p>
</article>

提示：header标签内只放引导性内容，操作按钮和正文内容放在后面。

5. footer标签：闭合区块的底部信息

常见错误：只在页面底部使用footer标签。

后果：文章或卡片失去了包含元信息和操作的语义容器。

在需要的地方使用footer标签：

<article>
  <h2>缓存机制详解</h2>
  <p>我们采用CDN和Redis双重缓存策略。</p>

  <footer>
    <p>最后更新：<time datetime="2025-03-19">2025年3月19日</time></p>
    <a href="/caching#discussion">参与讨论</a>
  </footer>
</article>

全局页脚留给网站导航、法律信息等内容。

6. nav标签：只用于导航，需要标签说明

常见错误：把所有链接列表都包在nav标签里。

后果：无障碍工具期望nav标签是重要的导航地标，随意使用会稀释这个信号。

正确用法：主导航、次要导航、面包屑、页面目录，都要加上说明标签：

<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/docs">文档</a></li>
    <li aria-current="page">api文档</li>
  </ol>
</nav>

好习惯：

用aria-current="page"标记当前项
导航链接使用列表（ul或ol）分组
为每个nav标签提供描述性标签

7. aside标签：相关内容但不是必需的

常见错误：把主要内容侧边栏或关键功能区放在aside标签里。

后果：有些用户会默认跳过aside内容，如果这是完成任务必需的内容，就不应该放在这里。

适合使用aside的场景：

提示信息、标注说明
相关文章链接
引用内容、广告推广
补充图表数据

正确写法：

<main>
  <article>
    <h1>设置双重认证</h1>
    <p>打开设置 → 安全中心，按照以下步骤操作。</p>
  </article>

  <aside aria-label="安全提示">
    <h2>安全提示</h2>
    <ul>
      <li>使用密码管理器</li>
      <li>离线保存备份代码</li>
    </ul>
  </aside>
</main>

完整的页面结构示例

+--------------------------- 页面 ---------------------------+
| header (网站头部)                                          |
| nav (主导航)                                              |
|                                                            |
| main [唯一的主要区域]                                      |
|   +-- article/section (带标题的内容区块)                  |
|   +-- article/section (带标题的内容区块)                  |
|   +-- aside (可选的相关内容)                              |
|                                                            |
| footer (网站底部)                                          |
+------------------------------------------------------------+

上线前的检查清单

只有一个顶层main标签，支持"跳转到主要内容"
每个section标签都有实际意义的标题
article标签只用于可以独立存在的内容
在需要的地方使用header和footer标签组织内容
nav标签带有说明标签，只包含导航内容
aside标签是补充内容，不影响主要功能

实际开发建议

在团队协作中，建议建立统一的语义标签使用规范。新成员加入时，应该先了解这些标签的正确用法。

对于现有项目，可以逐步改进：

先修复主要的无障碍访问问题
逐步优化页面结构
建立代码审查机制，确保新代码正确使用语义标签

使用合适的工具来检查：

浏览器开发者工具的无障碍检查功能
屏幕阅读器测试
HTML验证工具

语义化标签是你与屏幕阅读器、搜索引擎签订的"可用性合约"。正确使用这些标签，就能构建出结构清晰、易于访问、便于维护的网页。这不仅帮助了使用辅助技术的用户，也让你的代码更易于理解和维护。

记住：语义化HTML是web开发的基础。打好这个基础，后续的样式和功能开发都会更加顺利。花时间学习并正确使用这些标签，会在项目的整个生命周期中带来回报。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13039