HTML5新增标签核心是语义归位而非功能增强，必须优先掌握7个：、、、、、、，其中每页仅一次且不可嵌套，强调独立分发，用于逻辑分组，须关联邻近内容，/是语义范围容器而非视觉顶部/底部。HTML5 新增标签不是“功能增强”，而是“语义归位”——它们不改变渲染效果，但让浏览器、搜索引擎和屏幕阅读器真正读懂你的页面结构。用错或滥用，反而会破坏可访问性和 SEO。
哪些标签必须优先掌握？
日常开发中，真正高频、有明确语义边界、且浏览器兼容性已无顾虑（Chrome/Firefox/Safari/Edge ≥ 2018）的标签就这 7 个：、、、、、。
-
每页只能出现一次，它是整个文档的「内容主干」，不能嵌套在或里 -
强调「可独立分发」：R
SS 订阅、转发到社交平台时，它应能自洽存在；而 是逻辑分组，比如「产品特性」、「用户评价」这种依赖上下文的区块 -
不等于「右边栏」——它必须与邻近的或有关联（例如某篇教程旁的「注意」提示），纯广告或全局推荐应放在或独立容器中
SS 订阅、转发到社交平台时，它应能自洽存在；而
为什么
它们不是页面最顶/最底的视觉容器，而是「语义范围容器」：一个 可以自带 也能配自己的 （如「本节参考资料」）。
- 错误写法：
网站名
文章标题
正文...
- 正确写法：
网站名
文章标题
正文...
- 关键点：
在文档流中可多次出现，但每个都只服务于其最近的「语义父级」
它们不是装饰，而是为原生表单能力补缺：前者替代 JS 模拟的下拉提示，后者替代手动更新的 DOM 文本节点。
-
必须通过list属性绑定到，且id值要严格匹配；不支持的label属性（仅 Chrome 支持，其他浏览器忽略） -
需配合for属性关联输入源（如for="price quantity"），否则无法被 JS 的form.oninput自动感知 - 兼容性底线：IE 全系列不支持；移动端 Safari 对
的下拉样式控制极弱，建议搭配autocomplete="off"防止双下拉冲突
别碰（或慎用）的“新增标签”有哪些？
有些标签虽属 HTML5 规范，但实际落地成本高、支持差、或已被事实淘汰：
-
：已从 WHATWG 标准中移除，所有现代浏览器均不实现 -
-
和不是“新语义标签”，它们属于图形 API 容器，不该混进语义化讨论范畴 -
open属性或 CSS 重置
