HTML 정리 및 압축 - HTML을 온라인에서 무료로 포맷

어떤 HTML이든, 심지어 빌드 파이프라인에서 나온 한 줄짜리 압축 출력물이라도 붙여넣으면 도구가 적절한 들여쓰기, 한 줄에 태그 하나, 일관된 공백으로 다시 서식을 지정합니다. 2, 4 또는 8칸 들여쓰기를 선택하세요. 출력물은 편집기에 바로 넣거나 코드 리뷰 댓글에 붙여넣을 수 있습니다.

정렬 모드는 가독성을 위해 HTML을 펼칩니다. 태그를 각각의 줄에 배치하고, 중첩된 하위 요소를 들여쓰며, 섹션 사이의 빈 줄을 유지합니다. 압축 모드는 주석을 제거하고 연속된 공백을 줄이며 줄바꿈을 없애 파일을 더 적은 용량으로 만듭니다. 편집과 검토에는 정렬을, 프로덕션 배포에는 압축을 사용하세요.

아니요 — 내부 엔진인 js-beautify는 스크립트와 스타일 블록을 감지해 적절한 JS 또는 CSS 규칙으로 내용을 포맷하므로, 인라인 스크립트는 유효하게 유지되고 스타일시트는 가독성이 유지됩니다. 자체 닫기 태그, 빈 요소, 네임스페이스 속성(svg:xmlns, xlink:href)도 모두 올바르게 처리됩니다.

이 도구는 일반 HTML과 HTML 유사 템플릿을 잘 처리하지만, 순수 JSX(중괄호 표현식, 프래그먼트, 대문자로 시작하는 컴포넌트 태그)는 HTML로 파싱되어 사소한 외형상의 문제가 생길 수 있습니다. 프레임워크 전용 코드에는 사용하는 방언에 맞게 설정된 Prettier를 권장합니다. 순수 HTML, .htm, 템플릿 파일에는 저희 도구가 완벽합니다.

업로드가 전혀 발생하지 않습니다. 포매터는 js-beautify를 사용해 전적으로 브라우저에서 실행되므로, 내부 페이지 템플릿, 작성 중인 이메일, 개인 데이터가 포함된 HTML을 기기 밖으로 내보내지 않고 안전하게 붙여넣을 수 있습니다.

압축은 HTML 주석을 제거하고, 태그 사이의 연속된 공백을 하나의 공백으로 줄이며, 줄 바꿈을 없앱니다. 그 결과 렌더링은 동일하면서도 일반적으로 10~30% 더 작은 HTML이 만들어집니다. 서버의 gzip과 결합하면 콘텐츠가 많은 페이지의 초기 페이지 용량이 눈에 띄게 줄어듭니다.

예 — 다운로드를 클릭하면 정리된 결과물을 output.html로, 압축된 결과물을 output.min.html로 저장할 수 있습니다. 파일은 UTF-8로 인코딩되어 있어 영어, 키릴 문자, CJK, 오른쪽에서 왼쪽으로 쓰는 콘텐츠 모두에서 똑같이 잘 작동합니다.

이것은 브라우저에서만 작동하는 작은 유틸리티로, 호스팅 비용이 전혀 들지 않아 개발자 툴킷의 일부로 무료로 제공합니다. 광고도, 출력물에 대한 추적도 없으며, 브라우저가 메모리에 담을 수 있는 범위 외에는 파일 크기 제한도 없습니다.

Prettify 모드에서는 2, 4, 8칸 들여쓰기를 선택할 수 있습니다. 사용하는 편집기나 코드 스타일에 맞는 너비를 고른 뒤 결과를 복사하거나 output.html로 내려받으면 서식이 프로젝트에 그대로 적용됩니다.

The indent selector (2, 4 or 8 spaces) only applies in Prettify mode, since Minify strips all whitespace and line breaks by design — there is nothing left to indent. Switch back to Prettify to see the indent width take effect again.

붙여 넣거나 편집하는 동안 도구가 자동으로 구조 검사를 실행하여, 닫히지 않았거나 짝이 맞지 않거나 불필요한 닫는 태그를 출력 패널 바로 아래에 나열합니다 — 별도의 버튼이 필요 없습니다. 초록색 “구조적 문제 없음” 메시지는 마크업이 올바르게 구성되었음을 확인해 줍니다.

Use Prettify mode with 2-space indent — it's the most common convention and keeps diffs compact — then check the structural-issues panel to confirm they haven't left an unclosed tag. Once reviewed, switch to Minify mode before shipping to production to strip the extra whitespace back out.

Yes — drag an .html, .htm or .xhtml file onto the upload area, or click it to browse, and its contents load straight into the input box exactly as if you'd pasted them. From there, Prettify, Minify, indent width and the structural checker all work identically whether the markup came from a file or a paste.

Yes — once there's output, a Copy button appears next to the output panel and the primary action area. Clicking it copies the current Prettify or Minify result to your clipboard instantly (it briefly shows 'Copied!' for confirmation), so you can paste directly into your editor or a code review comment without saving an intermediate .html file.