html可读性差源于缩进错、大小写混、属性乱、标签未闭合；应统一用4空格缩进、全小写标签与属性、双引号包裹值、显式闭合所有标签、语义化命名并用短横线分隔。
HTML 可读性差，不是因为写得不够“高级”，而是缩进错、大小写混、属性乱、标签没闭合——这些细节一塌糊涂，团队协作和后续维护就立刻卡住。
缩进用 4 个空格，别碰 tab
所有主流规范（Google、腾讯云、百度前端）都明确要求：用 4 个空格做一级缩进，禁用 tab。原因很实际：不同编辑器对 tab 的宽度渲染不一致，有人设成 2，有人设成 8，合并代码时层级直接错位。
<div> 下的子元素必须缩进一层（即 4 个空格），子元素的子元素再加 4 个空格 <li> <code><style></style>和<script></script>标签内部的内容，第一级缩进要和标签本身对齐，不是从标签内容开始算- 行尾不能有空格——编辑器开启“显示不可见字符”功能，能一眼揪出
-
<section></section>、<article></article>、<data></data>等语义化标签必须小写 -
class、id、src、alt、href全部小写，且用双引号包裹值：class="header-nav"，不是class='header-nav'或class=header-nav - 布尔属性（如
disabled、checked）不带值，写成disabled，别写disabled="disabled" -
<p>段落文本</p>，不写成<p>段落文本</p> -
<li>列表项</li>，哪怕在<ul></ul>里也要闭合 - 自闭合标签（如
<img>、<input>）不加斜杠：<img src="a.jpg" alt="示例">，不是<img src="a.jpg" alt="示例"> -
、、这些可选闭合标签，建议显式写出，避免解析歧义 - 用功能或内容命名：
class="search-form"、id="main-navigation" - 单词间统一用短横线（
-）连接：user-avatar，不用下划线、驼峰或数字序号 -
id必须唯一，且尽量少用——多数场景用class更安全、更可复用 - 避免过度嵌套命名：
header-logo-link-wrapper比logo-wrapper多了两层冗余，先想清楚它到底是什么角色
所有标签名和属性名全小写
HTML5 允许大写，但大小写混用（比如 <div class="Header">）会让 <code>class 和 id 选择器在 JS 中匹配失败，也容易在拼写检查或 diff 工具里被当成两个东西。
每个标签都闭合，包括 <p></p> 和 <li>
HTML5 允许省略某些结束标签，但省略后会导致嵌套逻辑模糊，尤其在动态插入内容或使用 innerHTML 时极易出错。W3C Validator 也会报 warning。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
class 和 id 命名要语义化，别塞样式信息
写成 class="left-box" 或 id="red-btn" 看似方便，但一旦设计改版，“left”变“right”，“red”变“blue”，这个类名就彻底失语，还可能被误删。
真正影响可读性的，从来不是语法多难，而是同一份 HTML 在不同人手里是否“看起来像一个人写的”。缩进、大小写、闭合、命名——这四点踩准了，代码就自然清晰；漏掉任意一点，后期 debug 时花三倍时间找空格或大小写错误，就很真实。
