语义化html需严格遵循大纲层级与嵌套规则：h1唯一且为main首标签，section/article并列不嵌套，nav/main/aside等为独立单元，p内禁用块级元素，优先用原生标签替代class命名div。
嵌套前先理清文档大纲层级
浏览器和辅助技术靠 heading 标签（<h1></h1>～<h6></h6>）识别内容骨架，语义化标签只是“容器”，不是“标题生成器”。如果一个 <section></section> 里没放 <h2></h2>，它在大纲中就等于不存在；<main></main> 下第一个标题必须是 <h1></h1>（全页唯一），后续区块统一从 <h2></h2> 开始递进。
常见错误：用 <div class="section"> 包一堆 <code><p></p>，再加个 <span>标题</span>——这既不构成 section，也不形成大纲节点。
-
<header></header>和<footer></footer>是独立语义单元，不能互相嵌套，也不该出现在<p></p>或<li>内部 -
<nav></nav>应直接子元素为<ul></ul>或<ol></ol>，别用<div> 中转 <li> <code><main></main>必须是的直接子元素，且不能嵌套在<article></article>、<aside></aside>或<section></section>里 - 侧边栏推荐用
<aside></aside>，不是<section></section>；它应与<main></main>并列，而非嵌套其中 -
<article></article>内部可以有<header></header>（文章头）、<footer></footer>（作者/时间），但这些是文章自身的头尾，不是页面级的 - 连续三层以上语义标签（如
<main><section><article></article></section></main>）通常说明结构过深，优先检查是否能用 CSS Grid/Flex 控制视觉位置，而非靠嵌套“撑结构” - 想让段落带图标或操作按钮？用
<span></span>或<button></button>，别用<div> <li>需要图文混排？<code><figure></figure>+<figcaption></figcaption>是天然组合，不用额外<div> 包裹 <li>导航菜单别塞进 <code><p></p>，哪怕只有一行链接——用<nav><ul><li><a></a></li></ul></nav> -
<header></header>不一定非得在页面顶部——它也可以是<article></article>内部的标题区，作用范围由上下文决定 -
<footer></footer>同理，可以属于整个页面，也可以只属于某篇<article></article> - 避免给语义化标签再加冗余 class，比如
<nav class="primary-nav"></nav>——除非你真有多个导航需区分，否则<nav></nav>本身已足够表达意图
<section></section> 和 <article></article> 别乱套娃
<section></section> 表示有主题的分组，<article></article> 表示可独立分发的内容（比如一篇博客、一条新闻）。它们是并列关系，不是父子关系。一个页面里多个同类区块，应该用并列的 <section></section>，而不是 <section><section></section></section> 套两层。
容易踩的坑：<section></section> 里再包一层 <div class="wrapper">，或者把整页内容塞进一个 <code><section></section> 再塞进 <main></main>——这等于用语义标签模拟 div，白费力气。
<p></p> 里面不能塞块级容器
这是最常导致结构崩坏的硬性限制：<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 的内容模型只允许短语级内容（phrasing content），比如文字、<em></em>、<strong></strong>、<a></a>、<img>，但绝不能包含 <div>、<code><section></section>、<header></header>、<ul></ul> 等流式内容（flow content）。
现象：写了个 <p></p>
<div>xxx</div>
<p></p>，导致后续样式错位、JS 获取不到预期父节点。
用原生容器替代 class 命名的 div
看到 <div class="header">，第一反应应该是删掉 <code>class="header"，换成 <header></header>；<div class="nav"> 直接替换成 <code><nav></nav>；<div class="main-content"> 就是 <code><main></main>。这不是“换个名字”，而是把隐含的语义显性化。
关键点在于：替换后，CSS 选择器也要同步改。比如原来写 .header { margin-bottom: 20px; }，现在得写 header { margin-bottom: 20px; }，否则样式会丢失。
真正难的不是记住哪些标签能嵌套，而是每次写 HTML 前，先问一句：这个容器存在的目的，是为样式服务，还是为内容表达服务？如果答案是前者，大概率该删掉。
