<html>是整个文档的根容器，所有其他结构标签都必须嵌套其中，否则浏览器会自动纠错或渲染异常；<head>和<body>必须并列作为其直接子元素，前者存放元信息，后者承载可视内容，语义分离确保CSS、JS及SEO正常工作。
为什么
浏览器解析 HTML 时，把 当作元信息区（不显示）， 当作内容区（显示）。如果把 塞进 ，或者反过来，标签就脱离了语义层级——CSS 选择器可能失效，JavaScript 的 document.body 会取不到节点，SEO 也会降权。
-
只能包含元数据：如<title></title>、<meta>、<link>、<script></script>（且推荐加defer） -
是唯一合法的内容承载层，所有可视标签（<h1></h1>、<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a> <p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<div>、<code><main></main>等）都得从这里开始嵌套 - 遗漏
或不报错，但浏览器会自动生成空标签补全结构，导致实际 DOM 和你写的 HTML 不一致 -
<main></main>必须全局唯一，且不能嵌套在<aside></aside>或<nav></nav>里；重复出现时，只有第一个生效 -
<header></header>可以出现多次（比如每个<section></section>都能有自己的<header></header>），但顶层<header></header>通常放在开头 - 用
<div> 替代 <code><main></main>不影响渲染，但会让辅助技术无法识别主内容区域嵌套错误会导致结构“坍塌”，而不是样式错位
比如把
<p></p>直接塞进（跳过），浏览器会把它移到里——你写的结构和最终 DOM 不一致。这种“自动修复”看似友好，实则掩盖了问题。- 验证方式：打开 DevTools → Elements 面板，看左侧 DOM 树是否严格遵循
→ + → 语义区块 → 内容元素层级 - 常见坍塌点：
<table> 里漏写 <code><tbody>，<code><select></select>里直接写文本而非<option></option>，都会触发浏览器插入默认父元素 - 不要依赖自动修复——它因浏览器而异，Safari 和 Firefox 对缺失
<tbody> 的处理就不完全一样 真正决定文档结构的不是视觉排列，而是标签的嵌套关系和语义层级。哪怕所有样式清空，只要结构标签正确，大纲依然可读、导航依然可用、SEO 依然有效。</tbody>
- 验证方式：打开 DevTools → Elements 面板，看左侧 DOM 树是否严格遵循
<header></header>、<main></main>、<footer></footer> 这类语义标签不是“可选装饰”
它们不只是为了好看或写 CSS 方便。屏幕阅读器、搜索引擎、甚至浏览器内置的“大纲视图”（DevTools → Elements → 右键 → “Show Outline”）都依赖这些标签推断内容权重和逻辑顺序。
