HTML5新增标签核心是语义归位而非功能增强，必须优先掌握7个：、、、、、、，其中每页仅一次且不可嵌套，强调独立分发，用于逻辑分组，须关联邻近内容，/是语义范围容器而非视觉顶部/底部。
哪些标签必须优先掌握？
日常开发中，真正高频、有明确语义边界、且浏览器兼容性已无顾虑（Chrome/Firefox/Safari/Edge ≥ 2018）的标签就这 7 个：<header></header>、<footer></footer>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>。
-
<main></main>每页只能出现一次，它是整个文档的「内容主干」，不能嵌套在<article></article>或<section></section>里 -
<article></article>强调「可独立分发」：RSS 订阅、转发到社交平台时，它应能自洽存在；而<section></section>是逻辑分组，比如「产品特性」、「用户评价」这种依赖上下文的区块 -
<aside></aside>不等于「右边栏」——它必须与邻近的<article></article>或<section></section>有关联（例如某篇教程旁的「注意」提示），纯广告或全局推荐应放在<footer></footer>或独立容器中
为什么 <header></header> 和 <footer></footer> 容易误用？
它们不是页面最顶/最底的视觉容器，而是「语义范围容器」：一个 <article></article> 可以自带 <header></header>（含标题+发布时间），一个 <section></section> 也能配自己的 <footer></footer>（如「本节参考资料」）。
- 错误写法：
<body> <header><h1>网站名</h1></header> <article> <div class="header"><h2>文章标题</h2></div> <p>正文...</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12185" title="SEO-Awesome"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="SEO-Awesome" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12185" title="SEO-Awesome">SEO-Awesome</a> <p>利用Google官方API实现全链路出海SEO自动化，批量生成PSEO页面，自动发布与GA4数据复盘。</p> </div> <a href="/xiazai/skill12185" title="SEO-Awesome" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </article> </body> - 正确写法：
<body> <header><h1>网站名</h1><nav>导航</nav></header> <main> <article> <header><h2>文章标题</h2><time datetime="2026-01-04">今天</time></header> <p>正文...</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <footer><p>作者：张三</p></footer> </article> </main> <footer><p>© 2026 版权所有</p></footer> </body> - 关键点：
<header></header>和<footer></footer>在文档流中可多次出现，但每个都只服务于其最近的「语义父级」
<datalist></datalist> 和 <output></output> 这类“表单增强标签”怎么用才不翻车？
它们不是装饰，而是为原生表单能力补缺：前者替代 JS 模拟的下拉提示，后者替代手动更新的 DOM 文本节点。
-
<datalist></datalist>必须通过list属性绑定到<input>，且id值要严格匹配；不支持<option></option>的label属性（仅 Chrome 支持，其他浏览器忽略） -
<output></output>需配合for属性关联输入源（如for="price quantity"），否则无法被 JS 的form.oninput自动感知 - 兼容性底线：IE 全系列不支持；移动端 Safari 对
<datalist></datalist>的下拉样式控制极弱，建议搭配autocomplete="off"防止双下拉冲突
别碰（或慎用）的“新增标签”有哪些？
有些标签虽属 HTML5 规范，但实际落地成本高、支持差、或已被事实淘汰：
-
<command></command>和<menuitem></menuitem>：已从 WHATWG 标准中移除，所有现代浏览器均不实现 -
<keygen></keygen>：因安全模型过时，Chrome 95+、Firefox 99+ 已彻底废弃 -
<canvas></canvas>和<svg></svg>不是“新语义标签”，它们属于图形 API 容器，不该混进语义化讨论范畴 -
<details></details>/<summary></summary>虽可用，但默认展开态不一致（Safari 默认闭合，Chrome 默认展开），需强制加open属性或 CSS 重置
<main></main> 明确告诉辅助技术“这里才是用户该读的内容”，用 <nav></nav> 告诉屏幕阅读器“跳过这些链接直达正文”。其余都是锦上添花——但锦上若没花，布也得是好布。 
