必须且只能有一个的元素是，它须为直接子元素且不可嵌套于或另一中；可多次出现但语义有效性依赖所属节层级。
不符合W3C标准的HTML底层语义架构，往往不是因为用了错的标签，而是用对了标签却忽略了上下文约束和嵌套规则——比如把 <header></header> 放在 <main></main> 外却没包裹进 ，或者让 <section></section> 缺少明确的主题边界。
哪些元素必须有且只能有一个？
W3C 并不要求每个页面只有一组 <header></header>、<footer></footer> 或 <nav></nav>，但它们的语义有效性高度依赖所属“节”（sectioning content）的层级关系。例如：
-
<main></main>在整个文档中**必须且只能出现一次**，且不能是@#@#@#@#@#@#@#@#@#@0 提交代码，重点看 “Warning: Section lacks heading. Consider using h2–h6 elements to indicate section titles.” 这类提示 —— 它意味着 <code><section></section>、<article></article>等节元素没有标题，无法形成有效大纲节点 - 用命令行工具
html-validate配合html-validate-config.json启用"no-unused-elements"和"require-lang-attr"规则，能提前捕获缺失或孤立<aside></aside>的问题 - 手动检查：右键 → “查看页面源代码”，然后按 Ctrl+F 搜索
<h1></h1>到<h6></h6>，确认每个节级元素（<section></section>、<article></article>、<nav></nav>）都由一个显式标题启动，而非靠 CSS 视觉模拟
常见语义误用与修复方式
很多“看起来正常”的写法，其实破坏了语义连贯性：
- 用
<div class="header"> 替代 <code><header></header>：丢失节根节点，导致屏幕阅读器无法跳转到页首；修复就是直接换标签，别加 class 冲突 - 把多个独立博客文章用
<section></section>包裹：错误，应改用<article></article>——<section></section>表示主题相关的一组内容，<article></article>表示可独立分发、复用的内容单元 -
<footer></footer>放在<section></section>里却包含全站版权信息：这是跨节污染，全站版权应放在级<footer></footer>，而章节级<footer></footer>只能含该节的作者、更新时间等元数据 - 用
<ul></ul>+<li>实现导航但没包<nav></nav>：机器无法识别这是导航区块；补上<nav aria-label="主菜单"></nav>才算完整
真正难的不是记住每个标签定义，而是理解 W3C 语义模型本质：它是一套基于“节（sectioning root）→ 标题（heading）→ 内容”的树状推导逻辑，所有验证失败几乎都源于某处打断了这个链条 —— 比如漏标题、错嵌套、或用装饰性元素冒充结构性元素。
