Grid区域命名必须与语义标签严格对齐，如grid-template-areas中写"header nav main aside footer"，则DOM中必须存在且仅存在对应的<header><nav><main><aside><footer>标签，不可用div冒充，否则破坏SEO、可访问性及Lighthouse检测。
<main></main> 只能出现一次，<section></section> 必须带标题，<article></article> 要能独立复用——这些不是“建议”，是浏览器和辅助技术强制依赖的解析规则。绕开它们写 Grid 布局，视觉上可能没问题，但语义链一断，SEO、屏幕阅读器、Lighthouse 检测全会出问题。
Grid 区域命名必须和语义标签对齐
用 grid-template-areas 定义布局时，区域名不能凭空捏造，得直接映射到 HTML 标签角色。比如你写了 grid-template-areas: "header nav main aside footer"，那 DOM 里就必须有且仅有对应标签：<header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer>。不能用 <div class="main-content"> 冒充 <code><main></main>，class 名浏览器根本不认。
常见错误：
- 把
<section></section>当成“万能容器”塞进grid-template-areas，结果它没标题，语义降级为<div> <li>多个 <code><header></header>共享同一个 area 名，导致屏幕阅读器无法区分主页面头和文章区块头 - 用
<aside></aside>包导航链接——它只适合相关但非核心的内容（如作者简介、同类推荐），导航该用<nav></nav> -
<section></section>：它有没有明确主题？有没有配套的<h2></h2>–<h6></h6>？没有就换<div> <li> <code><aside></aside>：它和主内容是平行关系，还是从属关系？如果是“本页相关链接”，用<nav></nav>更合适
嵌套子网格要守住语义边界
在 <article></article> 或 <section></section> 内部用子 Grid 是完全可行的，但前提是外层标签本身语义成立。比如一个博客列表页，每个卡片用 <article></article> 包裹，里面再用 Grid 排列标题、摘要、时间——这没问题；但如果你把整个列表用 <section></section> 包着，里面却没 <h2></h2>，那这个 <section></section> 就失去了意义，不如直接用 <div>。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5806" title="html-deploy">html-deploy</a>
<p>使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>关键判断点：</p>
<ul>
<li>
<code><article></article>：删掉它，内容还能被 RSS 抓取、单独分享吗？不能就别硬套
Flex/Grid 布局中哪些地方必须保留 <div>
<p>不是所有包裹层都要语义化。以下三类情况，老实用 <code><div> 更干净：
<ul><li>纯粹为 CSS 对齐加的中间层，比如 <code><div class="card__content"> 用来控制内边距和文字流，不承载任何内容角色
<li>组件框架（Vue/React）要求单根节点，而父级结构已由语义标签定义好，这时 <code><div> 是合理妥协
<li>需要 <code>display: contents 或重置默认 margin/padding，而 <section></section> 等标签自带隐式样式或 ARIA role，反而干扰布局
记住：<div> 不是语义缺陷，是语义“空缺”时的正确选择。强行套语义标签，反而会让结构更混乱。
<p>最常被忽略的一点：语义标签的嵌套顺序必须和视觉逻辑一致。比如 <code><nav></nav> 放在 <header></header> 里是合理的，但放在 <footer></footer> 里就容易让辅助技术误判导航意图——哪怕你用 CSS 把它视觉上挪到了页脚位置，DOM 顺序才是机器读取的依据。
