이 도구 소개

HTML을 포맷하고 정리합니다. 중첩 단계마다 들여쓰기가 적용되고 짧은 요소는 한 줄로 유지되며 <pre>, <script>, <style> 블록은 그대로 둡니다. 잘못된 마크업은 고쳐주지 않으므로 검사기는 여전히 필요합니다.

사용 방법

압축된 마크업을 붙여넣고 정리를 실행한 뒤, 태그 짝이 그대로 맞는지 확인하고 편집기로 돌아가 작업을 이어가면 됩니다.

예제는 한 줄로 압축된 히어로 영역 마크업입니다.

입력

<section class="hero"><h1>CSS to Tailwind</h1><p>Convert utilities in the browser.</p><a href="/">Open</a></section>

출력

<section class="hero">
  <h1>CSS to Tailwind</h1>
  <p>Convert utilities in the browser.</p>
  <a href="/">Open</a>
</section>

들여쓰기가 예상 밖으로 밀린다면 원본에 닫는 태그가 빠져 있을 가능성이 큽니다.

HTML 뷰티파이어와 HTML 포매터는 다른가요?

아니요. 둘 다 중첩된 마크업을 다시 들여쓰는 작업이라, 이 페이지 하나로 두 검색 모두 해결됩니다.

무엇은 건드리지 않고, 잘못된 HTML도 고쳐 주나요?

<pre>, <textarea>, <script>, <style> 안의 내용은 작성한 그대로 둡니다. 도구는 들여쓰기만 하므로 닫히지 않았거나 잘못 중첩된 태그는 그대로입니다. 구조가 중요하면 검사기를 사용하세요.