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