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