HTML可维护性差的核心在于结构模糊、命名随意、嵌套失控；应优先使用语义化标签（如）、描述性类名、扁平结构与规范属性，而非堆砌div和样式化命名。
HTML 可维护性差，通常不是因为写得“不够炫”，而是结构模糊、命名随意、嵌套失控——改一处，三处出 bug。核心判断就一条：别人（或三个月后的你）打开文件，5 秒内能不能准确定位「导航在哪」「主内容从哪开始」「页脚是否独立」？
用对语义化标签，别堆 div
浏览器和开发者工具靠标签名理解结构，div 本身不带任何含义。当你写 <div class="header">，其实是在用 CSS 类“模拟”语义；而 <code><header></header> 是原生语义，自带 ARIA role、SEO 权重和可访问性支持。
-
<main></main>必须且只能出现一次，代表页面唯一主体内容；误用多个会破坏屏幕阅读器逻辑 -
<section></section>不是“分块容器”，它需要有明确主题，最好带<h2></h2>或更高层级标题 -
<aside></aside>不等于“右边栏”，而是与当前上下文相关但可独立存在的补充内容（比如博客文章旁的作者简介） - 避免
<div><div><div> <p> 这类纯装饰性嵌套——能用 <code><header><nav><ul></ul></nav></header>就别用三层div类名必须描述「是什么」，而不是「长怎样」
类名是 HTML 的接口契约。一旦写成
red-box或float-left，CSS 换个配色或布局方式，这个类名就失效甚至误导人。- 用
article-card而不是box-3，哪怕它现在只是个<div> <li>状态类用 BEM 风格：<code>button--disabled、nav-list__item--current，不依赖顺序或父级 - ID 优先用于 JS 锚点或表单关联（如
<label for="email"></label>），不用作样式钩子 - 禁止出现
style1、temp-fix、copy-of-header这类类名——它们会在三个月后变成谜题 - 嵌套建议控制在 3 层以内：比如
<article><header><h2></h2></header></article>合理，<div><div><div><div> <p> 就该重构</p> <li>所有属性值必须用双引号：<code>class="btn btn-primary"，不是class=btn——后者在含空格或特殊字符时直接解析失败 - 自闭合标签统一写法：
<img src="a.jpg" alt="示意图">（HTML5 允许省略/），不写<img alt="HTML中如何编写可维护的代码" >或<img alt="HTML中如何编写可维护的代码" >（后者在 XHTML 场景下不合法） - 每个
<table> 必须有 <code><thead> 或明确的 <code><caption></caption>，否则表格语义断裂，无障碍工具无法识别注释和工具不能替代结构设计
加注释是补救手段，不是设计缺陷的遮羞布。一个需要大段注释才能看懂的 HTML 片段，大概率结构本身就有问题。
- 只在真正必要的地方注释：比如复杂组件的边界（
<!-- end of product carousel -->），而不是每段<div> 都加<li>用 Prettier 或 VS Code 的格式化插件统一缩进（推荐 2 空格），禁用手动 Tab 混用</li> <li>检查 <code>lang属性是否设置：影响字体回退、语音合成、SEO 语言识别 - 图片必填
alt，空图也写alt=""（非省略），否则屏幕阅读器会读出文件名或 URL
真正难的不是记住规则，而是每次敲下
<div> 前多问一句：“这里有没有更准确的语义标签？”——答案往往就在手边的 <code><section></section>、<aside></aside>或<figure></figure>里。 - 只在真正必要的地方注释：比如复杂组件的边界（
结构扁平、闭合清晰、属性规范
DOM 层级过深会让 CSS 选择器脆弱、JS 查询变慢、审查元素时眼花。同时，松散的标签书写会放大协作成本。
立即学习“前端免费学习笔记（深入）”；
- 用
