div是无语义的通用容器，仅用于样式、脚本或布局；当内容无独立主题、无标题、不可单独引用时才应选用，否则优先使用section、article等语义标签。

div 不是语义标签，它本身不表达“头部”“导航”或“文章”这类含义，只表示一个通用块级容器。用它划分区域完全可行，但关键在于：**是否真需要它？有没有更合适的替代方案？**

什么时候该用 div 而不是 section、article 或 nav

当你只是为样式或脚本操作服务，且内容没有独立主题、不可被单独引用、也不具备明确结构意义时，div 才是合理选择。

• 比如一个用于包裹浮动子元素的“clearfix 容器”，内部只有几个 float: left 的卡片 —— 没有标题、不构成完整语义单元，用 div 就对了
• 又比如一个通过 JavaScript 动态插入内容的挂载点：<div id="app"></div>，这里纯属技术占位，section 反而会误导辅助技术
• 再比如你正在写一个 CSS Grid 布局容器：<div class="grid-layout">...</div>，它只是网格父容器，不承载语义，也不需要被搜索引擎或屏幕阅读器识别为“一节内容”

div 必须配 class 或 id 才有意义

单独写 <div>内容</div> 几乎没用 —— 它不会带来任何样式、交互或可访问性提升。浏览器只把它当一个默认块级换行符处理。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• class 用于复用样式或 JS 选择，例如 <div class="card">、<code><div class="sidebar"> <li> <code>id 用于唯一锚点或 JS 获取，例如 <div id="modal-root">，但一个页面中不能重复出现相同 <code>id
• 避免用 div + id="header" 代替 <header></header> —— 后者自带语义和默认 ARIA role，前者得手动补 role="banner" 才算达标

嵌套 div 容易导致“divitis”（过度嵌套）

常见错误是层层套 div 来实现 margin/padding/背景等效果，结果 HTML 结构臃肿、可维护性差、无障碍支持弱。

• 例如：<div class="wrapper"><div class="inner"><div class="content">文本</div></div></div> —— 大概率可以简化为单个 <div class="content"> 配合 CSS padding/margin <li>检查每个 <code>div：它是否承担了明确职责？能否被伪元素 ::before/::after、CSS 容器查询或现代布局属性（如 gap、inset）替代？
• 用浏览器开发者工具选中元素时，如果看到连续 3 层以上无 class/id 的 div，基本就是冗余结构

响应式与布局中 div 的实际定位方式

纯靠 div 无法完成现代布局，必须配合 CSS。常见组合有：

• Flex 容器：<div class="nav-menu" style="display: flex; gap: 1rem;"></div> —— 子项自动水平排列，div 只是载体
• Grid 容器：<div class="dashboard" style="display: grid; grid-template-columns: 200px 1fr;"></div> —— 划分左右两栏，div 提供上下文
• 清除浮动（已过时但仍有遗留）：<div style="clear: both;"></div> 应替换为 overflow: hidden 或 display: flow-root 等更现代方案

真正容易被忽略的是：**div 自身没有布局能力，它的行为完全由 CSS 决定；写一堆 div 却不写对应样式，等于只画了格子没填内容。**