HTML 정렬·압축

HTML Beautifier & Minifier

HTML을 정렬하거나 압축하며 인라인 요소를 보존하고 공백 축약 여부를 고를 수 있습니다.

넘겨받은 HTML을 읽을 수 있게 들여쓰고, 바이트가 중요할 때는 압축합니다. 토크나이저가 WHATWG의 raw text·RCDATA 상태를 구현하고 있어서, 스크립트 문자열 안의 `</div>`가 태그로 읽혀 뒤가 전부 망가지는 일이 없습니다.

🔒 브라우저 안에서만 처리htmlformatminifyweb

모드

들여쓰기

속성 따옴표

줄 폭

html·head·body 안도 들여쓰기

주석 유지

HTML 입력

.html 파일 놓기

이 탭 안에서만 읽습니다. 어디에도 올라가지 않습니다.

정렬된 HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
<style>
  body{font-family:system-ui}
    .card{padding:1rem}
</style>
</head>
<body>
<!-- the body -->
<main class="wrap">
  <h1>Hello from <em>todododo</em></h1>
  <p>
    A paragraph whose line breaks and spacing are all over the place. Have a look at the <a href="/tools" title='the "tools" list'>tool list</a>.
  </p>
  <ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
  </ul>
  <pre>  the indentation in here
    stays  exactly as it is</pre>
  <textarea name="memo">  the spaces in here
stay too </textarea>
  <img src="logo.png" alt="logo"><br>
  <script>
    const html = "</div>";   // a tag inside a string is not a tag
    if (a < b && c > d) { go(); }
  </script>
</main>
</body>
</html>

요소

텍스트 노드

주석

최대 깊이

어디까지 손대는지

· 직접 만든 토크나이저가 <script>·<style> 은 원문 텍스트로, <textarea>·<title> 은 RCDATA로 읽습니다. 문자열 안의 </div>가 태그로 오해받지 않습니다.
· <pre>·<textarea> 안은 한 글자도 바꾸지 않고, <script>·<style> 은 줄 단위로 들여쓰기만 맞춥니다. 안의 코드를 다시 쓰지는 않습니다.
· <br>·<img> 같은 빈 요소(void)와, <li>·<p>·<td> 처럼 닫는 태그를 생략해도 되는 요소를 규격대로 처리합니다. 닫는 태그를 새로 넣어 주지는 않습니다.
· 압축은 주석·공백·불필요한 따옴표만 지웁니다. 선택적 닫는 태그를 빼거나 속성 순서를 바꾸는 일은 하지 않습니다.
· 태그가 어긋나거나 속성이 겹치면 줄·열과 함께 알려 주되, 브라우저가 그러듯 최대한 읽어서 결과를 냅니다.

안의 CSS는 CSS 정렬·압축으로, 스크립트는 자바스크립트 정렬·압축으로 따로 다듬을 수 있습니다.

사용 방법

페이지나 조각을 붙여넣습니다
doctype이 붙은 문서 전체도, 템플릿에서 복사한 일부도 됩니다. 조각이면 들여쓸 `html` 요소가 없을 뿐입니다.
배치를 정합니다
들여쓰기 폭, 속성을 큰따옴표로 통일할지, 속성 목록이 길 때 접을 줄 폭, 그리고 `html`·`head`·`body` 안을 들여쓸지입니다. 손으로 쓴 페이지는 그 안을 들여쓰지 않는 경우가 많습니다.
문제 목록을 읽습니다
어긋난 태그와 중복된 속성을 줄·열과 함께 나열합니다. 문서는 그래도 정렬됩니다. 브라우저도 렌더링할 테니까요. 다만 항목 하나하나가 고칠 만한 것입니다.
또는 전송용으로 압축합니다
주석, 공백, 필요 없는 속성 따옴표를 뺍니다. 조건부 주석과 `<!--!` 주석은 남기고, 전·후 수치가 얼마나 얻었는지 보여 줍니다.

자주 묻는 질문

`<pre>` 블록은 안전한가요?

안전합니다. `<pre>`와 `<textarea>` 안은 두 모드 모두 한 글자도 바꾸지 않습니다. 그 안의 공백은 내용이니까요. `<script>`와 `<style>`은 줄 단위로 들여쓰기만 맞추고 내용을 다시 쓰지는 않습니다.

빠뜨린 닫는 태그를 넣어 주나요?

아니요. 이해는 합니다. `<li>`, `<p>`, `<td>`는 암묵적으로 닫히고 `<br>`, `<img>` 같은 빈 요소는 원래 닫는 태그가 없습니다. 그래서 트리는 제대로 만들어집니다. 다만 쓰지 않은 태그를 써 넣는 건 정렬이 아니라 편집입니다.

Jinja나 ERB, Handlebars 같은 템플릿 파일도 되나요?

템플릿 문법이 우연히 텍스트처럼 보이는 만큼만 됩니다. `{% if %}` 블록을 구조로 이해하지 않기 때문에, 한 분기에서 열고 다른 분기에서 닫는 태그가 있으면 그 안의 들여쓰기가 틀립니다. 렌더링된 결과를 정렬하는 편이 낫습니다.

압축하면 화면이 달라지나요?

HTML에서 인라인 요소 사이의 공백은 의미가 있고, 그걸 줄이는 것이 여기서 픽셀을 움직일 수 있는 유일한 설정입니다. `<span>a</span> <span>b</span>`와 두 span이 붙어 있는 것은 다릅니다. 레이아웃이 거기 기대고 있다면 공백 축약을 끄세요.