html5真正新增且必须掌握的五个语义化标签是header、nav、main、article、footer；它们分别代表页眉、主导航、唯一主体内容、可独立分发的内容块和页脚，具备明确结构意义与良好兼容性。
哪些标签是 HTML5 真正新增且必须掌握的
HTML5 新增语义化标签不止十几个，但日常开发中真正高频、有明确结构意义、且浏览器兼容性已无顾虑的，就这五个：header、nav、main、article、footer。其他如 section、aside、figure 虽然也属新增，但使用场景更窄，或容易误用——比如把每个 div 都换成 section，反而破坏语义。
-
main必须且只能出现一次，代表页面唯一主体内容；重复使用会被屏幕阅读器忽略或报错 -
nav不等于“所有链接集合”，仅用于主导航（如顶部菜单、面包屑），页脚链接或文章内跳转不用它 -
article要求内容可独立分发或复用（如一篇博客、一条新闻），不是“有标题的盒子”就该套用 - IE9 及以下不识别这些标签，若需支持，得加
document.createElement('header')或用 html5shiv —— 但现在基本可忽略
为什么不能继续用 div 套 class 模拟语义
不是不能，而是会丢失两层关键信息：机器无法理解，人容易写串。搜索引擎和辅助技术（如读屏软件）依赖原生标签判断内容层级与作用，<div class="header"> 和 <code><header></header> 对它们来说完全是两个世界。
- SEO 层面：
header内的h1更可能被视为主标题权重；而div.header h1只是普通文本节点 - 可访问性层面：屏幕阅读器会把
nav自动朗读为“导航区域”，用户可快速跳过；div.nav则需手动遍历 - 维护成本：团队协作时，看到
aside就知道这是补充信息区，看到class="sidebar"还得翻 CSS 或文档确认含义
常见误用场景和对应修正方式
语义化标签不是“贴标签比赛”，用错比不用更糟。最典型的是把 section 当万能容器，或者在 article 里硬塞广告位。
- 错误：用
section包裹单个按钮或一行文字 → 正确：纯展示内容优先用div，section应含主题一致的多块内容（如标题 + 段落 + 列表） - 错误：在
article底部加“相关推荐”模块 → 正确：推荐内容属于附属信息，应移入aside，且需确保它和当前article逻辑关联 - 错误：多个
header堆在一页顶部（如 logo 区、搜索区、导航区各一个）→ 正确：一个header可包含多个子模块；若需语义区分，用role="banner"或嵌套hgroup（已废弃，慎用）
移动端和 SEO 场景下必须注意的细节
语义标签本身不提升性能，但在特定场景下会触发隐式行为——尤其在移动端和搜索引擎抓取时。
立即学习“前端免费学习笔记（深入）”；
- 部分 iOS Safari 会根据
main自动优化滚动锚点，nav可能影响底部工具栏的显示逻辑 - Google 官方文档明确表示：
article和main是判断内容主次关系的重要信号，错误嵌套（如main套article再套main）可能导致摘要截断或排名降权 -
time和mark虽小众，但在新闻类站点中，<time datetime="2026-03-05">今天</time>能让 Google 显示“发布于 X 小时前”，比纯文本更可靠
header、nav、main、footer 四件套开始落地最稳妥；article 和 aside 要结合内容模型判断，宁缺毋滥。语义不是装饰，是结构契约——写错一个标签，可能就让某个用户或某台爬虫彻底误解你的页面。
