HTML标签不缩进会导致肉眼难定位嵌套层级、删错闭合标签、协作效率低、编辑器折叠异常、Git diff混乱、innerHTML模板难调试；块级元素需缩进，行内元素可单行；推荐4空格而非tab；SSR/模板引擎输出应压缩，开发时可开启pretty调试。
HTML标签不缩进会导致什么问题
肉眼难定位嵌套层级，改代码时容易删错闭合标签，协作时别人得花时间反推结构。浏览器不care缩进，但人需要——尤其是处理<form>里套<div>再套<label><input>这种常见组合时。
- 编辑器折叠功能失效或误折叠（比如把整个
<section>当成一层） - Git diff 显示大段“已删除/已新增”，看不出实际改了哪一行内容
- 用
innerHTML拼接字符串生成HTML时，没缩进的模板极难调试
哪些地方必须缩进，哪些可以不
块级元素（<div>、<article>、<nav>、<ul>等）及其子元素要缩进；行内元素（<span>、<a>、<strong>）在单行内写完就不用额外换行缩进。
- 允许单行：
<p>这是简短段落</p>、<a href="#top">回到顶部</a> - 必须换行缩进：
<ul>下每个<li>单独一行并缩进一级 - 表单控件建议拆开：
<label>和<input>不要挤在同一行，尤其当<label>含文本时
4个空格还是tab？Prettier默认怎么配
选4个空格。tab在不同编辑器里可能被渲染成2/4/8格，协作时容易错位；而Prettier默认就是4空格，且会自动把tab转成空格。
- 检查
.prettierrc里有没有"tabWidth": 4和"useTabs": false - VS Code用户确认设置了
"editor.insertSpaces": true和"editor.tabSize": 4 - 如果项目用了ESLint+Prettier，确保
eslint-config-prettier已禁用indent规则，避免冲突
服务器返回的HTML要不要格式化
不要。服务端渲染（SSR）或模板引擎（如EJS、Twig）输出的HTML，应保持压缩态：去掉换行和缩进。体积小、传输快，浏览器解析速度不受影响。
- 开发环境可开启模板引擎的
pretty选项辅助调试，但上线前关掉 -
innerHTML = "<div><p>..."这类JS拼接HTML，别手动加换行——用String.raw或模板字符串分多行写更安全 - 真正需要可读性的场景只有：手写的静态页、组件库文档示例、调试用的
console.log(document.body.outerHTML)
最常被忽略的是「混合场景」：比如Vue单文件组件里的<template>区块，既会被Prettier格式化，又可能经由构建工具压缩。这时候得看vite.config.ts或vue.config.js里build.minify和htmlMinifierOptions是否启用——格式化和压缩，从来不是二选一，而是分阶段的事。
立即学习“前端免费学习笔记（深入）”；
