HTML5新增标签核心是语义归位而非功能增强，必须优先掌握7个：、、、、、、，其中每页仅一次且不可嵌套，强调独立分发，用于逻辑分组，须关联邻近内容，/是语义范围容器而非视觉顶部/底部。

HTML5 新增标签不是“功能增强”，而是“语义归位”——它们不改变渲染效果，但让浏览器、搜索引擎和屏幕阅读器真正读懂你的页面结构。用错或滥用，反而会破坏可访问性和 SEO。

哪些标签必须优先掌握？

日常开发中，真正高频、有明确语义边界、且浏览器兼容性已无顾虑（Chrome/Firefox/Safari/Edge ≥ 2018）的标签就这 7 个：

、、、

、、

、。

• 每页只能出现一次，它是整个文档的「内容主干」，不能嵌套在 或
  里
• 强调「可独立分发」：RSS 订阅、转发到社交平台时，它应能自洽存在；而
  是逻辑分组，比如「产品特性」、「用户评价」这种依赖上下文的区块
• 不等于「右边栏」——它必须与邻近的 或
  有关联（例如某篇教程旁的「注意」提示），纯广告或全局推荐应放在 或独立容器中

为什么

和 容易误用？

它们不是页面最顶/最底的视觉容器，而是「语义范围容器」：一个 可以自带

（含标题+发布时间），一个

也能配自己的 （如「本节参考资料」）。

• 错误写法：

  
    
  网站名
    
      
  文章标题
      
  正文...
    
  

• 正确写法：

  
    
  网站名
    
  
      
        
  文章标题
  今天
        
  正文...
        
      
    
    
  

• 关键点：
  和 在文档流中可多次出现，但每个都只服务于其最近的「语义父级」

和

这类“表单增强标签”怎么用才不翻车？

它们不是装饰，而是为原生表单能力补缺：前者替代 JS 模拟的下拉提示，后者替代手动更新的 DOM 文本节点。

• 必须通过 list 属性绑定到 ，且 id 值要严格匹配；不支持 的 label 属性（仅 Chrome 支持，其他浏览器忽略）
• 需配合 for 属性关联输入源（如 for="price quantity"），否则无法被 JS 的 form.oninput 自动感知
• 兼容性底线：IE 全系列不支持；移动端 Safari 对 的下拉样式控制极弱，建议搭配 autocomplete="off" 防止双下拉冲突

别碰（或慎用）的“新增标签”有哪些？

有些标签虽属 HTML5 规范，但实际落地成本高、支持差、或已被事实淘汰：

• 和 ：已从 WHATWG 标准中移除，所有现代浏览器均不实现
• ：因安全模型过时，Chrome 95+、Firefox 99+ 已彻底废弃
• 和 不是“新语义标签”，它们属于图形 API 容器，不该混进语义化讨论范畴
• /
  虽可用，但默认展开态不一致（Safari 默认闭合，Chrome 默认展开），需强制加 open 属性或 CSS 重置

真正决定 HTML5 语义价值的，从来不是你能用多少新标签，而是你能否用

明确告诉辅助技术“这里才是用户该读的内容”，用 告诉屏幕阅读器“跳过这些链接直达正文”。其余都是锦上添花——但锦上若没花，布也得是好布。