같은 텍스트에 대한 정반대의 두 작업입니다. 서식은 줄바꿈과 들여쓰기를 더해 사람이 중첩을 따라갈 수 있게 하고, 압축은 브라우저에 필요 없는 것을 모두 걷어냅니다. 여기서는 둘 다 여러분이 준 문자 자체를 다루지, 다시 만들어진 문서를 다루지 않습니다. 그래서 나오는 것은 여전히 여러분의 마크업입니다.

사용 방법

1. 1 HTML을 붙여 넣으세요. 페이지 전체든 조각이든 됩니다.
2. 2 들여쓰기를 고른 뒤 정렬 또는 압축을 누르세요.
3. 3 결과를 복사하거나, 다른 버튼으로 한 번 더 돌려 비교해 보세요.

공백이 언제나 잡음은 아닙니다

인라인 요소 두 개 사이의 공백 하나는 눈에 보이는 텍스트입니다. 지우면 "one two"가 "onetwo"가 됩니다. 블록 요소 사이에서는 같은 공백이 아무 의미도 없습니다. 여기 압축기는 들여쓰기는 버리되, 실제로 일하고 있는 구분용 공백은 남깁니다.

pre와 textarea를 건드리지 않는 이유

이 안에서는 모든 공백과 줄바꿈이 독자가 보게 될 내용입니다. 코드 블록을 다시 들여쓰면 표시되는 내용이 조용히 바뀌고, textarea를 다듬으면 폼이 보내는 값이 바뀝니다. script와 style도 마찬가지입니다. 그 안은 다른 언어라 손대지 않고 그대로 통과시킵니다.

서식을 맞출 뿐, 고치지는 않습니다

브라우저 파서 위에 만들어진 도구는 깨진 마크업을 조용히 고칩니다. 태그를 닫아 주고, 떠도는 것을 버리고, 명세가 요구하는 자리로 요소를 옮깁니다. 디버깅 중에는 대개 그것이 원하는 바가 아닙니다. 쫓고 있는 버그가 바로 그 "고쳐진" 것일 수 있으니까요. 이 도구는 텍스트만 다시 배치하고 실수는 보이는 자리에 남겨 둡니다.

HTML 압축은 작은 이득입니다

페이지에서 공백을 걷어내면 대개 몇 퍼센트를 아낄 뿐이고, 서버의 gzip이 어차피 그 대부분을 압축했을 것입니다. 진짜 무게는 이미지, 글꼴, 스크립트에 있습니다. HTML을 압축하는 이유는 템플릿 생성기가 읽을 수 없는 출력을 남겼기 때문이지, 페이지가 훨씬 빨라지길 기대해서가 아닙니다.