应优先使用语义化标签替代无意义的布局：header、nav、main、article、section、aside、footer各司其职，提升可访问性、seo与可维护性；仅在纯样式隔离、js钩子或组件约束等无语义场景下才用。

用语义化标签替代无意义的 <div> 布局 <p>直接结论：能用 <code><header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer> 的地方，就别套 <div class="header"> —— 浏览器不认 class，但认这些标签名；屏幕阅读器、SEO、可维护性全靠它。 <p>常见错误现象：<code>div div div 嵌套三层以上，class 名全是 wrap、container、box，结构一动，CSS 全崩；调试时打开开发者工具，满屏 <div>，看不出哪块是导航、哪块是正文。 <ul> <li> <code><header></header> 不只是“顶部栏”，它代表整个页面或 <article></article> 的**引入性内容**（含 logo、标题、简介），一个页面可有多个

<nav></nav> 专指**导航链接集合**，不是所有按钮或菜单都算 —— 比如页脚里的“关于我们”链接列表，也该包在 <nav></nav> 里

<main></main> **必须且只能出现一次**，且不能嵌套在 <article></article> 或 <aside></aside> 内，它是页面核心内容容器

<section></section> 表示有独立主题的**逻辑区块**，要有自己的 <h2></h2>～<h6></h6>；纯样式分隔（比如加个 margin）不用它

什么时候还非得用 <div>？ <p>不是所有容器都要语义化。当纯粹为了样式隔离、BEM 命名、或 JS 操作钩子，且没有内容语义时，<code><div> 是合理选择。 <p>典型场景：</p> <ul><li>Grid/Flex 容器内部需要额外包裹一层来控制对齐或间距（<code><div class="card__body">） <li>Vue/React 组件模板中，根节点必须是单个元素，而语义标签可能破坏结构层级（例如组件本该渲染为 <code><article></article> 子内容，但父组件强制要求一个 wrapper）

需要 display: contents 或某些 CSS 重置行为，而语义标签自带默认样式或隐式 ARIA 角色，反而干扰

关键判断标准：删掉这个标签，内容是否仍能被正确理解其角色？ 如果答案是“是”，那大概率该用 <div>；如果删了就分不清哪是侧边栏、哪是正文，则该换语义标签。 <h3>避免 <code><div> 套语义标签的反模式 <p>写成 <code><div class="article"><article>...</article></div> 是常见冗余 —— <article></article> 本身已具备语义和默认 display（block），再包一层 <div> 仅增加 DOM 节点，无实际收益。 <p>更隐蔽的问题：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>把 <code><nav></nav> 放进 <div class="header-nav">，而非直接用 <code><header><nav></nav></header> —— 屏幕阅读器会读作“div 区域”，跳过导航语义

用 <section></section> 包裹单个 <p></p>，且无标题，违反 <section></section> 的“主题性”定义，应改用 <div> 或直接设样式 <li>为兼容旧版 IE 强行降级：IE8 不支持语义标签，但现代项目早该用 <code>document.createElement('header') 或 posthtml 插件补全，而不是放弃语义

真正难处理的，往往是历史项目里那些没命名规则、没文档、又混着 JS 动态插入的 <div id="content_123"> —— 这类节点没法靠标签名推断用途，只能结合上下文、JS 变量名、网络请求响应结构一点点反推。</div>