내 도구

HTML 서식 정리

지저분한 HTML을 읽기 좋게 들여쓰거나 한 줄로 압축합니다. 전부 브라우저에서.

사용 방법

  1. HTML을 붙여 넣거나 입력하세요. 입력하는 대로 정리되거나 압축되며 누를 버튼은 없습니다.
  2. 서식 정리 / 압축을 바꾸고 공백 2칸이나 4칸을 고르세요. 압축 모드에서는 들여쓰기 설정이 꺼집니다.
  3. 블록 요소는 깊이마다 한 단계씩 들여쓰고 한 줄에 하나씩 둡니다. 인라인 콘텐츠(<a>나 <b>와 섞인 텍스트)는 쓴 그대로 유지합니다.
  4. 빈 요소(<br>, <img>, <input>…)는 닫는 태그가 필요 없고 선택적인 />까지 그대로 보존합니다.
  5. 원시 텍스트 요소(<script>, <style>, <textarea>, <title>, <pre>)는 글자 단위로 복사하며 안쪽은 해석하거나 다시 정리하지 않습니다.

예시

입력

<!DOCTYPE html><html><head><meta charset="utf-8"><title>데모</title></head><body><div class="card"><h1>안녕하세요</h1><p>반갑습니다 <b>여기</b></p><ul><li>하나</li><li>둘</li></ul></div><script>const x=1;</script></body></html>

출력

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>데모</title>
  </head>
  <body>
    <div class="card">
      <h1>안녕하세요</h1>
      <p>반갑습니다 <b>여기</b></p>
      <ul>
        <li>하나</li>
        <li>둘</li>
      </ul>
    </div>
    <script>const x=1;</script>
  </body>
</html>

인라인 콘텐츠와 <script>/<style> 내용은 그대로 두고, <meta>는 빈 요소라 쓴 형태로 보존합니다.

한계

  • 구조만 봅니다. 태그 짝, 빈 요소, 흔한 암묵적 닫기(li/td/tr/dt/dd/option/p/head), 중첩입니다. DTD/Schema 검증은 없습니다.
  • 내장 JavaScript와 CSS는 정리하지 않습니다. <script>/<style> 내용은 그대로 둡니다(그런 코드는 코드 서식 정리를 쓰세요).
  • 선택적인 HTML5 닫는 태그를 모두 추론하지는 않으며, 실제로 잘못된 중첩은 줄과 열로 알려 줍니다.
  • 인라인/혼합 콘텐츠는 일부러 다시 들여쓰지 않습니다. <pre>/<textarea>/<title> 내용은 그대로 보존합니다.
  • 파일 업로드, URL 매개변수, 기록, 계정은 없습니다. 입력은 브라우저를 벗어나지 않습니다.

이 도구 모음의 다른 서식 도구와 텍스트 도구입니다.

XML 서식 정리

코드 서식 정리

코드 압축