HTML语义错误会直接导致DOM错乱、无障碍失效和SEO降权；<p>禁止嵌套块级元素，<main>必须唯一且为body直接子元素，<section>须配标题，<header>/<footer>需符合上下文语义。
<main> 只能出现一次，<section> 必须带标题，<p> 里塞 <div> 会被浏览器悄悄拆开——这些不是“写法不够优雅”的问题，而是直接导致 DOM 结构错乱、无障碍导航失效、SEO 权重错配的硬伤。
为什么 <p> 里不能放 <div> 或 <ul>
<p> 的语义是“一段连续文本”，W3C 明确规定它只允许包含行内容（phrasing content），比如 <strong>、<em>、<img>，不包括任何块级元素。
常见现象包括：
- 写的
<p><div>文字</div></p>，Elements 面板里实际变成<p></p><div>文字</div> -
p > div这类 CSS 选择器完全不生效 -
document.querySelector('p').children返回空列表
想包裹多段结构？用 <section> 或 <article>；想加标题或列表？先关掉 <p>，再在父容器里并列放 <h2> 和 <ul>。
立即学习“前端免费学习笔记（深入）”；
<main> 多个、嵌套或放错位置会怎样
<main> 是页面唯一主内容入口，屏幕阅读器靠它实现“跳到主内容”功能。一旦出错，辅助用户第一眼就卡住。
典型错误：
- 页面中写了两个
<main>—— 读屏器可能只识别第一个，或直接忽略 - 把
<main>套在<header>或<section>里面 —— 它被当成普通子内容，失去“主内容”语义 - 没给
<main>设id—— “跳转到主内容”快捷键无法定位
正确做法：它必须是 <body> 的直接子元素，且全页仅一个；若需视觉分组，用 <div class="wrapper"> 包裹其内部，而非用语义标签嵌套。
<section> 当 <div> 用，等于主动放弃语义
<section> 不是“带点语义的 <div>”，它的存在前提是：该区块有明确主题，并应出现在文档大纲中（例如通过 <h2> 标题体现）。
后果很实在：
- 没有标题的
<section>会让屏幕阅读器的“按章节跳转”功能失效 - 搜索引擎可能弱化该区块内容权重，因它无法确认这是逻辑分组还是随意包装
- 开发者工具的“大纲视图”里不会显示该区块，调试时等于隐形
修复很简单：要么补上 <h2>（或用 aria-labelledby 指向已有标题），要么直接换回 <div> —— 没标题就别硬套 <section>。
<header> 和 <footer> 不是“页面顶部/底部装饰条”
<header> 描述的是“某个内容单元的头部”，它可以出现在 <article>、<section> 内部，而不是只能挂在 <body> 顶上。
常见误用：
- 在
<header>里塞<nav>——<header>本身不承载导航语义，<nav>应与它平级或作为子元素独立存在 - 把整个页脚栏写成
<footer><div class="social">…</div></footer>——<div>不是合法子元素，浏览器会自动修正结构，导致样式和 JS 行为异常 - 用
<header>包含登录表单或搜索框却不配标题 —— 它失去了“引言性区块”的语义支撑
记住：<header> 和 <footer> 是上下文相关的，不是全局布局锚点；它们的子元素必须符合语义约束，否则浏览器会静默修复，而你根本看不到 DOM 已被重写。
