HTML 압축·정렬 도구

예시

압축 전

<!DOCTYPE html>
<html lang="ko">
  <head>
    <!-- 페이지 메타 정보 -->
    <title>안녕하세요</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>굵게 <strong>강조</strong> 한 문장.</p>
  </body>
</html>

압축 후

<!doctype html><html lang="ko"><head>  <title>안녕하세요</title> </head> <body> <h1>Hello World</h1> <p>굵게 <strong>강조</strong> 한 문장.</p> </body></html>

상태 표시줄: 압축됨 — 230 B → 170 B (−26.1%). 주석이 사라지고 들여쓰기는 각각 공백 하나가 됩니다. 태그 사이 공백이 남는 이유는 공백만 있는 텍스트 노드를 모두 공백 하나로 남기기 때문입니다. <p>Hello <strong>world</strong>!</p>에서는 <strong> 앞의 공백이 화면에 보이므로, 도구는 어떤 공백을 지워도 되는지 판단하지 않습니다. html-minifier-terser 같은 빌드 시점 압축기는 collapseWhitespace 등의 옵션으로 더 줄일 수 있습니다.

압축 대상

• 태그 사이의 공백(inter-tag whitespace)을 축소합니다.
• HTML 주석은 제거됩니다 — IE 조건부 주석(<!—[if IE]>)은 보존됩니다.
• disabled="" 와 같은 boolean 속성은 disabled 로 단순화됩니다.
• 텍스트 안의 연속 공백은 공백 하나로 줄입니다. 태그 사이에 공백만 있는 텍스트는 지우지 않고 공백 하나로 남깁니다. 어떤 공백이 화면에 보이는지 파서로는 알 수 없기 때문입니다.
• <p>, <h1> 같은 블록 요소 안에 텍스트만 있으면 그 텍스트의 앞뒤 공백을 제거합니다. <strong>, <a>, <span> 같은 인라인 요소는 보이는 공백이므로 양 끝에 하나씩 남깁니다. <strong>Note: </strong>read this.는 그대로입니다.

그대로 보존되는 항목

• <script>, <style>, <pre>, <textarea>, <code>, <samp>, <kbd> 안의 내용.
• 속성 값(따옴표 내부의 공백, 인라인 이벤트 핸들러 포함).
• <!DOCTYPE> 선언.

HTML 을 수동으로 압축해야 할 때

최신 빌드 체인(Vite, Webpack, Astro, Next.js)은 번들 단계에서 HTML 을 자동으로 압축합니다. 이 도구는 1 회성 작업에 적합합니다 — CMS 에서 내보낸 코드, 압축 전후 크기 비교, 수작업 템플릿 점검 등. 정렬 기능은 일상적으로 사용할 수 있으며, 프로덕션 환경의 한 줄짜리 HTML 을 붙여넣어 디버깅이나 diff 를 위한 가독 가능한 사본을 얻을 수 있습니다.

제한

• 인라인 요소 양 끝의 공백은 CSS로 보이지 않는 위치(줄 시작 등)에서도 남습니다. 도구는 CSS를 읽지 않으므로 display나 white-space가 공백 표시를 바꾸는지 판단하지 못합니다.
• HTML 공백(스페이스, 탭, 줄바꿈, 폼피드, 캐리지 리턴)만 줄입니다. 줄바꿈 없는 공백은 남습니다. Price:  10 EUR는 세 개의 nbsp를 유지한 채   대신 문자 U+00A0으로 출력됩니다. 전각 공백 U+3000도 남습니다.
• 조각에서 HTML 파서가 <body> 밖으로 옮기는 내용은 원래 순서대로 다시 씁니다. 첫 요소 앞의 <!—[if mso]> 같은 조건부 주석과, 본문 앞의 <title>, <meta>, <link>, <style>입니다. 일반 주석은 어디에 있든 삭제합니다.
• 인라인 JavaScript와 CSS는 그대로 복사하며 압축하지 않습니다.
• HTML은 브라우저의 DOMParser로 파싱하므로 잘못된 마크업은 고쳐진 형태로 출력되고(빠진 닫는 태그 추가, 불필요한 태그 제거), doctype은 <!doctype html>로 씁니다.