正确使用这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开发的基础。打好这个基础，后续的样式和功能开发都会更加顺利。花时间学习并正确使用这些标签，会在项目的整个生命周期中带来回报。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
