真正解决语义混乱的HTML5标签是<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>，它们被浏览器和屏幕阅读器原生识别，能准确表达内容结构与关系。
哪些HTML5标签真正解决语义混乱问题
不是所有新增标签都值得用。真正能替代 <div class="header"> 或 <div id="nav"> 这类“伪结构”的，只有几个： <header>、<nav>、<main>、<article>、<section>、<aside>、<footer>。它们被浏览器原生识别，屏幕阅读器可直接映射为对应角色（如 banner、navigation），而 <div> 什么也表达不了。
<section> 和 <article> 到底怎么选
关键看内容是否具备「独立分发与复用性」：
<article> <h2>2024年Q2性能优化报告</h2> <p>本报告可单独RSS订阅、邮件转发或嵌入其他站点……</p> </article> <section> <h2>前端加载策略</h2> <p>这部分依赖上下文，不能脱离当前页面独立存在。</p> </section>
-
<article>必须有明确的标题（<h1>–<h6>），且内容在逻辑上自包含 -
<section>是主题性分组，不强调独立性；一个<article>内可以嵌套多个<section> - 别用
<section>替代<div>做布局——它不是样式容器，没有默认样式，但有明确语义权重
<main> 只能出现一次，且不能嵌套
这是最容易出错的地方。很多开发者把 <main> 当成“主要内容区”随意包裹，结果破坏了辅助技术的导航逻辑：
- 整个文档中
<main>必须唯一，且不能是<article>、<aside>、<header>等的子元素 - 它应直接包裹页面核心内容，跳过页眉、导航、侧边栏、页脚等外围区块
- 错误示例：
<article> <main><p>这里不该放 main</p></main> </article>
- 正确结构：
<header><h1>网站标题</h1></header> <nav>...</nav> <main> <article><h2>正文标题</h2></article> </main> <aside>...</aside> <footer>...</footer>
兼容性与无障碍支持现状
IE9+ 已完全支持这些标签的语义解析，但老版本IE（IE8及以下）不识别，需用 document.createElement 激活（现代项目基本不用考虑）。真正要注意的是：
- 仅写语义标签 ≠ 自动获得无障碍支持；必须配合适当的标题层级（
<h1>–<h6>）、aria-label（如多导航时区分主/次）和焦点管理 -
<nav>不代表“所有链接集合”，只适用于主导航、页内锚点导航、分页等**导航目的明确**的链接组 - 部分框架（如 Vue/React）在 SSR 场景下若未正确输出语义标签，会丢失结构信息——检查最终 HTML 源码，而非组件模板
<main> 或滥用 <section>，可能比不用还糟。 
