header、nav、article、footer 是 html5 真正新增且必须用的语义标签，用于明确页面结构，提升 seo 与无障碍访问支持。
哪些标签是HTML5真正新增且必须用的
直接说结论：header、nav、article、footer 这四个是项目里最常遇到、也最容易写错的语义标签。它们不是“可有可无的装饰”，而是浏览器、搜索引擎和屏幕阅读器识别页面结构的依据。
别把 section 或 aside 当成默认替代品——比如用 section 包导航栏，就等于告诉机器“这是一段普通内容区块”，而不是“这是用来跳转的导航”。SEO 和无障碍支持会立刻打折。
-
header可以在页面顶部用一次，在每个article或section里再用一次（比如文章标题+作者信息） -
nav必须只包裹“主导航链接”，面包屑、页脚链接、分页按钮都不算，强行套会误导辅助技术 -
article要能独立存在、被单独订阅或转发，博客正文、新闻条目、用户评论都符合；但“相关推荐”列表不是article，它是附属内容 -
footer同样可嵌套——整页底部放版权声明，每篇文章末尾放发布时间和编辑者，都是合理用法
IE9及以下兼容性问题怎么绕过去
IE9 把 header、nav 这些当行内元素，不设 display: block 就塌缩成一条线，布局全乱。这不是“加个 polyfill 就好”的问题，而是得提前干预样式层。
最稳的做法不是引入 script，而是 CSS 里统一重置：
立即学习“前端免费学习笔记（深入）”；
header, nav, article, section, aside, footer {
display: block;
}
注意两点：
- 别只写
header, footer，漏掉nav或article在老项目里很常见，结果导航栏突然变 inline - 如果用了 CSS 预处理器（如 Sass），建议抽成一个
%semantic-reset占位符，避免重复写选择器 - IE8 及更低版本完全不识别这些标签，连
display: block都无效，此时只能降级为div+ class，但 class 名仍建议保留语义，比如<div class="header"> <h3>main 标签为什么很多人不敢用</h3> <p><code>main是 HTML5.1 加入的正式标签，作用明确：标识文档中与当前页面最相关、独一无二的主要内容。但它有个硬性限制——整个页面只能出现一次，且不能嵌套在article、aside、header、nav、footer内部。常见翻车现场：
- 在
article里又包一层main—— 错。article 本身已是独立内容单元，再套 main 属于语义嵌套错误 - 首页有轮播图+三篇推荐+侧边栏，把轮播图也塞进
main—— 错。轮播图属于引导性内容，不是“主要”内容，应放在header或独立section中 - 用 JS 动态插入
main，但没检查是否已存在 —— 可能触发 W3C 验证失败，部分读屏软件会跳过重复的main
稳妥做法：先确认页面主体内容唯一且不可拆分，再用
main包裹它，其他一律用更宽松的section或div。figure 和 figcaption 容易被当成“图片容器”
figure不是<div class="img-wrapper"> 的高级写法。它的语义是“一段自包含的流内容，通常带有说明，且可以被文档主体引用或移除而不影响主线逻辑”。 <p>所以这些场景才该用：</p> <ul> <li>一张带标题的统计图表（<code>figcaption写“图1：2025年用户留存率趋势”） - 在
- 一段代码示例（
pre套在figure里，figcaption注明“清单3-2：React useEffect 清理函数写法”） - 引用他人的一段话 + 出处（
blockquote+figcaption）
纯装饰图、图标、头像、按钮背景图——不用 figure，它们没有独立语义，也不需要 caption。
顺带一提：figcaption 必须是 figure 的第一个或最后一个子元素，放中间会被解析为普通内容，失去关联性。
语义标签不是贴标签比赛，关键在“机器能不能准确理解你这段内容的意图”。写完记得用浏览器的开发者工具切到“Accessibility”面板，看看 nav 是否被识别为 navigation，main 是否被标记为主区域——这才是真实生效的信号。
