可读性取决于语义清晰、缩进可靠、结构分层三要素；语义标签是dom说明书，缩进须统一用2空格并严格对齐，class名应表用途而非样式，空白行用于逻辑分隔。
直接说结论：可读性不是靠“看起来整齐”堆出来的，而是靠语义清晰、缩进可靠、结构分层这三件事稳住的。其他炫技式排版，反而容易干扰阅读节奏。
用对语义标签比写满注释更管用
看到 <div class="header"> 和 <code><header></header>，浏览器渲染效果可能一样，但前者要靠人猜，后者浏览器和屏幕阅读器一眼就懂。语义标签不是装饰，是 DOM 的说明书。
-
<main></main>页面中只能出现一次，且必须包裹核心内容，别把它当普通容器滥用 -
<section></section>要有明确主题，最好配一个<h2></h2>或更高级别标题，否则不如用<div> <li> <code><time datetime="2026-07-23"></time>这类带属性的标签，机器能解析，SEO 和无障碍都受益；纯文字“2026年7月23日”则不行 - 别为了“语义化”硬套标签：一段普通说明文字没到独立成章的程度，老实用
<p></p>或<div> 配语义类名更实在<h3>缩进错位比语法错误更难 debug</h3> <p>HTML 不依赖换行渲染，但人依赖缩进来识别父子关系。缩进一乱，闭合标签漏在哪、谁包着谁，三分钟都理不清。</p> <ul> <li>统一用 2 个空格（不是 Tab），Tab 在不同编辑器里可能显示为 2/4/8 格，协作时极易错位</li> <li>每个块级元素（如 <code><header></header>、<section></section>）独占一行，子元素缩进一层，闭合标签与开始标签垂直对齐 -
<p></p>里嵌<strong></strong>或<a></a>可紧凑写，但长段落建议前后换行，避免视觉缠绕 - 反例：
<nav><ul> <li>首页</li> <li>关于</li> </ul></nav>—— 看不出层级，也难加样式钩子
class 名必须回答“这是什么”，而不是“它长啥样”
class="red-btn" 这种命名，等按钮改成蓝色或圆角，类名就失效甚至误导。别人接手时，得翻 CSS 才敢动 HTML，成本翻倍。
- 优先用描述用途或内容的名词：
class="search-submit"、class="error-message" - 避免缩写（
usr）、拼音（yonghu）、序号（div1） - BEM 是成熟路径，但哪怕只做到 kebab-case + 名词+用途，也比纯样式名强得多
- 复杂组件可在起始和结束处加注释，如
<!-- .product-card -->和<!-- /.product-card -->，但别注释显而易见的内容
空白行不是装饰，是逻辑分隔线
空行不占体积，但能让人眼瞬间识别模块边界。滥用会稀释信号，不用又让结构糊成一片。
- 页面主区域之间加空行：
<header></header>和<main></main>之间、<main></main>和<footer></footer>之间 - 独立组件前后加空行：表单、导航栏、评论区这类功能完整的小单元
- 避免连续两个以上空行，防止滚动时“断层感”过强
- 内联元素密集处（如一串
<span></span>）不靠空行分隔，靠语义类名或父容器控制
最常被忽略的点是：语义标签和缩进规则必须同步落地。只改标签不调缩进，或只调格式不换标签，效果打对折。两者像左右手，缺一不可。
