HTML嵌套应遵循语义先行、层级扁平原则，推荐使用<header><nav><main>等语义标签替代无意义div嵌套，DOM深度控制在3层以内，缩进统一为2空格且子元素独占一行，属性按优先级排序并显式闭合标签。
HTML 嵌套过深是可读性崩坏的起点，不是“写得对不对”的问题，而是“别人能不能一眼看出结构意图”的问题。真正有效的嵌套标准，核心就两条：语义先行、层级扁平。
用 <header> <nav> <main> 替代无意义的 <div> 嵌套
看到 <div class="wrap"><div class="inner"><div class="content"> 这种结构，没人能立刻判断这是页眉、导航还是正文区域。浏览器和读屏软件也完全无法识别。
-
<header>明确表示页面顶部区域，会被读屏软件播报为“页眉” -
<nav>不只是“放链接的盒子”，它代表一组导航链接，语义+可访问性双达标 -
<main>是文档唯一主内容容器，一个页面只能有一个，且不能嵌套在<article>或<aside>内 - 避免把
<main>当成万能包裹容器——它不是<div class="main">的替代品，而是有严格语义边界的元素
嵌套深度控制在 3 层以内
DOM 层级越深，CSS 选择器越难写，JS 查询越慢，团队成员理解成本越高。所谓“3 层”，是指从语义容器开始算起（不含 <html> 和 <body>）。
- 推荐结构：
<main>→<section>→<article>（共 3 层） - 危险信号：
<div><div><div><div><p>或连续嵌套多个<div class="xxx"> - 深层嵌套常源于“先套盒子再填内容”的习惯，应改为“先定语义再组织内容”
- 若必须展开细节（如表单字段组），优先用
<fieldset>+<legend>，它们自带语义层级，不额外增加 DOM 深度
缩进统一用 2 空格，且子元素独占一行
缩进不是为了“好看”，是为了让父子关系肉眼可判。Tab 键在不同编辑器里行为不一致，必须禁用。
立即学习“前端免费学习笔记（深入）”；
- 强制使用 2 个空格（不是 4 个，也不是 Tab），项目内全员统一
- 每个块级标签（
<header>、<section>、<div>等）独占一行，闭合标签与开始标签垂直对齐 - 单行内联元素（
<span>、<em>、<a>）可与文本同行，但不要强行折行破坏语义流 -
<style>和<script>内部代码缩进，需与外层标签对齐，不是另起一套缩进规则
属性顺序和闭合写法影响嵌套可维护性
看似琐碎的写法差异，会在多人协作时放大嵌套理解难度。
- 属性按优先级排序：
class、id、src/href、alt、loading等，布尔属性（如disabled）不写= "disabled" - 所有标签必须显式闭合：即使
<p>在 HTML5 中允许省略结束标签，也必须写</p>—— 否则嵌套边界模糊，易引发意外渲染 - 空元素（
<img>、<input>、<br>）不加尾部/，即写<img src="x.jpg" alt="x">，而非<img src="x.jpg" alt="x" /> - 属性值一律用双引号，禁止单引号或无引号，尤其当值含空格或连字符时（如
class="product-card"）
嵌套不是技术能力的体现，而是结构思考的痕迹。最易被忽略的，是把“能跑通”当成“写对了”——浏览器容错强，不代表结构合理；代码能渲染，不代表别人能快速接手。语义标签选错、层级无意加深、缩进混用，三者叠加，三天后你自己都可能需要重读一遍才能理清逻辑。
