HTML5核心语义化标签共10个左右，必须掌握的有、、、、、、、、、，它们分别解决结构不清、SEO差、无障碍访问难问题。

HTML5 新增的语义化标签不是“越多越好”，而是为解决「结构不清、SEO 友好性差、无障碍访问困难」这三类实际问题而设计的。真正该用、常用、值得优先掌握的，其实就 10 个左右。

哪些标签是必须掌握的语义化核心

浏览器支持早已不是问题（IE9+ 基本覆盖，现代项目可默认支持），关键是选对场景。以下标签在真实项目中出现频率高、替代 效果明确、且有明确的 ARIA 对应角色：

• ：页面或区块的头部，**不等于**网站顶部导航栏——它可嵌套使用，一个 里也可以有独立的
• ：仅用于**主导航链接集合**，面包屑、页脚链接、侧边相关文章推荐都不属于此范畴
• ：页面中**唯一**的主体内容容器，不可嵌套，且每个页面最多一个；若误用多个或包裹无关内容，会破坏屏幕阅读器的跳转逻辑
• ：能独立分发、复用的内容单元（如博客正文、新闻条目、评论），注意它可嵌套（如评论里的回复也可用 ）
• ：有主题的**内容分组**，必须带标题（

  –

  ），否则语义弱于 ；别把它当“分区 div”滥用
• ：与当前内容**相关但可分离**的补充信息（如侧边栏、术语解释、引用来源），不是所有侧边栏都适用——广告位、登录框仍该用
• ：对应
  ，可出现在页面底部，也可用于 或
  内部（如文章末尾的作者信息）

容易误用的“新标签”及替代建议

有些标签看似语义清晰，但实际使用中极易出错，甚至比不用更糟：

• + ：**仅用于媒体及其标题**（图片、图表、代码块、引用等），且标题必须是对该媒体的说明；别把段落标题塞进去
• ：必须带 datetime 属性（如 五月十二日），否则纯文本渲染无额外价值；日期范围需用两个 或 ISO 格式连字符
• ：表示**上下文中的高亮引用**（如搜索结果中关键词），不是强调色装饰——加粗用 ，颜色点缀用 CSS
• /
  ：原生折叠组件，但默认无过渡动画，无障碍支持依赖 open 属性和键盘焦点管理；简单展开需求可直接用，复杂交互建议仍走 JS 控制

兼容性与 DOM 操作注意事项

语义标签本身不影响 JS 获取元素，但老版本 IE（IE8 及以下）不识别这些标签，会导致：

• CSS 无法通过标签名选择（header { ... } 不生效）
• document.createElement('header') 在 IE8 需提前“注册”（用 document.createElement 遍历创建一次）
• 主流方案已统一：引入 html5shiv（仅需在 中加载），或直接放弃 IE8 支持（2025 年绝大多数业务已可行）

现代框架（React/Vue）中，JSX/模板语法直接写

没问题，编译后仍是标准 HTML，无需额外处理。

要不要用

？一个硬性检查点

判断是否该用

，只看一个事实：全站是否只有一个区域承载用户打开页面后最想看的内容？ 如果答案是肯定的，就该包一层
；如果首页是多卡片聚合、后台系统是菜单+工作区双重心，则可能不需要——此时用 更准确（保留语义又不强求结构唯一性）。

真正难的不是记住标签名，而是每次写结构时多问一句：“这个容器，对搜索引擎、对键盘用户、对屏幕阅读器来说，它‘是什么’？”