HTML5核心语义化标签共10个左右，必须掌握的有<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>、<figure>、<time>、<mark>，它们分别解决结构不清、SEO差、无障碍访问难问题。
HTML5 新增的语义化标签不是“越多越好”，而是为解决「结构不清、SEO 友好性差、无障碍访问困难」这三类实际问题而设计的。真正该用、常用、值得优先掌握的，其实就 10 个左右。
哪些标签是必须掌握的语义化核心
浏览器支持早已不是问题（IE9+ 基本覆盖，现代项目可默认支持），关键是选对场景。以下标签在真实项目中出现频率高、替代 <div> 效果明确、且有明确的 ARIA 对应角色：
-
<header>：页面或区块的头部，**不等于**网站顶部导航栏——它可嵌套使用，一个<article>里也可以有独立的<header> -
<nav>：仅用于**主导航链接集合**，面包屑、页脚链接、侧边相关文章推荐都不属于此范畴 -
<main>：页面中**唯一**的主体内容容器，不可嵌套，且每个页面最多一个；若误用多个或包裹无关内容，会破坏屏幕阅读器的跳转逻辑 -
<article>：能独立分发、复用的内容单元（如博客正文、新闻条目、评论），注意它可嵌套（如评论里的回复也可用<article>） -
<section>：有主题的**内容分组**，必须带标题（<h1>–<h6>），否则语义弱于<div>；别把它当“分区 div”滥用 -
<aside>：与当前内容**相关但可分离**的补充信息（如侧边栏、术语解释、引用来源），不是所有侧边栏都适用——广告位、登录框仍该用<div> -
<footer>：对应<header>，可出现在页面底部，也可用于<article>或<section>内部（如文章末尾的作者信息）
容易误用的“新标签”及替代建议
有些标签看似语义清晰，但实际使用中极易出错，甚至比不用更糟：
-
<figure>+<figcaption>：**仅用于媒体及其标题**（图片、图表、代码块、引用等），且标题必须是对该媒体的说明；别把段落标题塞进去 -
<time>：必须带datetime属性（如<time datetime="2023-05-12">五月十二日</time>），否则纯文本渲染无额外价值；日期范围需用两个<time>或 ISO 格式连字符 -
<mark>：表示**上下文中的高亮引用**（如搜索结果中关键词），不是强调色装饰——加粗用<strong>，颜色点缀用 CSS -
<details>/<summary>：原生折叠组件，但默认无过渡动画，无障碍支持依赖open属性和键盘焦点管理；简单展开需求可直接用，复杂交互建议仍走 JS 控制
兼容性与 DOM 操作注意事项
语义标签本身不影响 JS 获取元素，但老版本 IE（IE8 及以下）不识别这些标签，会导致：
立即学习“前端免费学习笔记（深入）”；
- CSS 无法通过标签名选择（
header { ... }不生效） -
document.createElement('header')在 IE8 需提前“注册”（用document.createElement遍历创建一次） - 主流方案已统一：引入
html5shiv（仅需在<head>中加载），或直接放弃 IE8 支持（2024 年绝大多数业务已可行）
现代框架（React/Vue）中，JSX/模板语法直接写 <header> 没问题，编译后仍是标准 HTML，无需额外处理。
要不要用 <main>？一个硬性检查点
判断是否该用 <main>，只看一个事实：全站是否只有一个区域承载用户打开页面后最想看的内容？ 如果答案是肯定的，就该包一层 <main>；如果首页是多卡片聚合、后台系统是菜单+工作区双重心，则可能不需要——此时用 <div role="main"> 更准确（保留语义又不强求结构唯一性）。
真正难的不是记住标签名，而是每次写结构时多问一句：“这个容器，对搜索引擎、对键盘用户、对屏幕阅读器来说，它‘是什么’？”
