必须用而非当内容有独立主题且含–标题，否则语义失效；仅用于样式、布局或脚本钩子时应选，二者分工明确，误用损害seo与可访问性。
选错容器元素，页面结构就埋了雷：SEO掉权、屏幕阅读器念错、后期改样式要重写三成 CSS。
什么时候必须用 <section></section> 而不是 <div>
<p><code><section></section> 不是“带样式的 <div>”，它代表一个有标题、可被独立引用的内容单元。浏览器大纲生成、屏幕阅读器跳转、搜索引擎提取摘要都依赖这个语义。
<ul>
<li>这块内容在文档大纲里该出现一级/二级条目（比如“产品特性”“用户评价”）→ 用 <code><section></section>，且必须配 <h2></h2> 或更高级别标题
<div> 更干净，没额外语义干扰
<li>删掉某层 <code><div> 后样式没崩？那它大概率不该存在；删掉 <code><section></section> 却导致大纲缺失或读屏器跳过整块内容 → 说明它承载了真实结构意义
<main></main> 和 <article></article> 能混用吗
不能互换，角色完全不同：<main></main> 是整个页面的唯一主内容区（全页只能有一个），<article></article> 是可独立分发、复用的内容单元（如一篇博文、一条新闻、一个评论）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 首页聚合多篇文章 → 外层用
<main></main>，每篇用<article></article> - 单篇博文页 → 整个主体内容包在
<main></main>里，<article></article>可省略（除非页面含侧边推荐文章等其他<article></article>） - 错误写法：
<main><h1>关于我们</h1> <p>…</p></main>—— “关于我们”不是可独立分发的内容，不该套<article></article>，也不该让<main></main>承担语义单元职责
嵌套太深的 <div> 怎么破
<p>三层以上 <code><div> 嵌套不是布局问题，是结构失控信号。DevTools 里点开五层才看到目标元素，JS 查询慢、CSS 选择器冗长、改一个 margin 要翻三页样式表。
<ul><li>检查每一层是否真必要：删掉中间某层 <code><div>，看样式是否真崩？没崩就删
<li>用 CSS 的 <code>contain: layout style 替代部分包裹需求，限制样式泄漏和布局影响范围
<div> 包裹组件，改用 <code><template></template> 或 Fragment（>）
class="wrapper-inner__container"——这类命名往往是冗余嵌套的标志自定义元素当容器用会出什么问题
像 <my-card></my-card> 这类自定义标签默认是 display: inline，且零语义、零 ARIA 支持。直接替换 <div> 会让屏幕阅读器读成 “my card”，而不是“卡片：标题”。
<ul>
<li>必须手动设置 <code>display: block 或 display: flex
role="region" 或更具体的 role（如 role="article"），并配 aria-labelledby
最常被忽略的其实是 <section></section> 必须带标题这个硬约束——没 <h2></h2> 或更高阶标题的 <section></section>，在辅助技术中等于不存在。
