HTML语义化标签嵌套禁忌_HTML文档常见错误结构纠正-html教程-PHP中文网

语义化标签嵌套错误虽不报错，但会强制修改dom结构：内禁放等块级元素，因它仅允许行内容；/禁止嵌套等无关标签；必须直接包裹；void元素如写成会被解析为两个标签，引发结构偏移。

html语义化标签嵌套禁忌_html文档常见错误结构纠正

语义化标签嵌套错误不会报错，但会悄悄改写 DOM 结构——你写的和浏览器实际渲染的，根本不是一回事。

为什么 `<p></p>` 里不能放 `<div>、<code><ul></ul>` 或 `<h2></h2>`
`<p></p>` 是短语级容器，W3C 明确规定它只能包含文本、`<span></span>`、`<em></em>`、`<strong></strong>`、`<img>` 这类行内容（phrasing content）。一旦塞进 `<div> 或 <code><ul></ul>`，浏览器立刻关闭当前 `<p></p>`，把后续内容扔到外面。
常见现象包括：

写的是 `<p></p> <div>文字</div>`，Elements 面板里却看到 `<p></p> <div>文字</div>`

CSS 中 `p > div` 选择器完全不生效

JS 执行 `document.querySelector('p').children` 返回空列表

想包裹多块内容？用 `<section></section>` 或 `<article></article>` 替代 `<p></p>`；想加标题或列表？先关掉 `<p></p>`，再在父容器里放 `<h2></h2>` 和 `<ul></ul>`。

`<header></header>` 和 `<footer></footer>` 里哪些标签绝对不能嵌套

<header></header> 不是“页面顶部大横条”，而是“某个区块的页眉”。它语义上只容许与该区块直接相关的元信息：比如 <h1></h1>～<h6></h6>、<logo></logo>（自定义）、<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/1511" title="文心大模型"><img src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a3574b022434.png" alt="文心大模型" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/1511" title="文心大模型" class="overflowclass">文心大模型</a> <p class="overflowclass">文心大模型是百度推出的知识增强大模型体系。</p> </div> <a rel="nofollow" href="/ai/1511" title="文心大模型" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>（说明性文字），但禁止嵌套 <nav></nav>、<aside></aside>、<main></main> 或另一个 <header></header>。

同理，<footer></footer> 只能承载当前上下文的尾部信息（版权、联系方式、相关链接），不能塞进 <nav></nav>、<form></form> 或 <section></section>。

错误示例：

<header><nav><ul><li>首页</li></ul></nav></header>

正确做法：把 <nav></nav> 提一级，和 <header></header> 并列，或放在直接子级；若需导航+页眉组合，用 <section></section> 包裹二者，再各自语义化。

`<ul></ul>` 和 `<ol></ol>` 只能直接包 `<li>`

<ul></ul> 的 content model 是 “zero or more <li> elements”，意味着中间不能插 <div>、<code><p></p>、<span></span>，哪怕只是用来加 class 或控制样式。

典型错误写法：

浏览器会自动拆解：先闭合 <ul></ul>，再把两个 <div> 当作独立节点插入，导致 DOM 结构断裂、CSS 伪类（如 <code>ul li:last-child）失效、无障碍阅读器无法识别为列表。

修复方式只有两种：

把 <div class="item"> 换成 <code><li class="item">
如果真需要额外容器（比如做动画组），用 <li><div class="item">...</div></li>，确保 <li> 是 <ul></ul> 的直接子元素

自闭合标签写成 `<img>` 或 `<input>` 会怎样

HTML5 中 <img>、<input>、<br>、<hr> 是 void 元素，**禁止闭合**。写成 <img src="x"> 或 <input type="text">，浏览器会当作两个标签处理：第一个被忽略，第二个被当成普通开放标签，导致后续所有元素整体右移一级。

后果很隐蔽：

页面右侧莫名出现空白或错位
某些区域点击无响应（事件委托目标错乱）
document.body.children.length 比预期多出一个空节点

检查方法：打开 DevTools → Elements，逐个点开顶层节点，看有没有意外的空 <input> 或 <img> 标签卡在中间；更准的是用 W3C Validator，它会直接报 Void element input is not allowed to have an end tag。

记住：void 标签只写开始形式，属性全小写，不加斜杠，不加结束标签——<img src="x" alt=""> 就够了。