🧽 HTML 코드 포맷팅

HTML 코드를 태그 구조에 맞게 들여쓰기 정리합니다.

사용법

  1. HTML 코드를 입력하세요.
  2. '정리' 버튼을 누르세요.
  3. 태그 구조에 맞게 들여쓰기된 코드가 표시됩니다.

🎯 이럴 때 씁니다

입력 · 출력 예시

입력
<nav><a href="/">Home</a></nav>
출력
<nav>
  <a href="/">
    Home
  </a>
</nav>

한 줄로 붙어 있던 HTML을 태그 구조에 맞춰 2칸 들여쓰기로 정리하며, 텍스트와 속성(href="/")은 그대로 보존됩니다.

포맷터가 하는 일과 한계

태그의 중첩 구조에 맞춰 들여쓰기와 줄바꿈을 정리합니다. 태그·속성·내용 자체는 변경하지 않습니다.

처리 항목설명
들여쓰기중첩 깊이에 따라 단계별로 적용
줄바꿈블록 태그 단위로 분리
유지하는 것태그 이름, 속성, 텍스트 내용은 그대로
한계가벼운 구조 정리용 — PHP·템플릿 문법이 섞인 코드는 태그 짝이 어긋나 보일 수 있음

자주 묻는 질문

완전한 파서 기반인가요?
아니요. 태그 구조를 인식해 들여쓰기하는 경량 포맷터로, script·style·pre 태그 내용은 원문 그대로 보존합니다.
잘못된 HTML도 정리되나요?
닫히지 않은 태그 등 문법 오류가 있어도 최대한 정리를 시도하지만, 완전한 검증이 필요하면 HTML5 검증기를 함께 사용하세요.
입력한 코드가 서버로 전송되나요?
전송되지 않습니다. 브라우저 안에서만 처리됩니다.
코드 내용이 바뀌나요?
공백과 줄바꿈만 정리됩니다. 태그 구조, 속성, 텍스트는 변경되지 않습니다.
PHP가 섞인 HTML도 되나요?
템플릿 구문이 섞이면 태그 짝을 제대로 판단하지 못할 수 있습니다. 순수 HTML에 사용하는 것이 안전합니다.

🧽 더 알아보기: HTML 들여쓰기가 중요한 이유

구조가 보여야 실수도 보인다.

다른 코딩 도구

📘
JSON 포맷터
JSON 정리·검증·압축
🗓️
타임스탬프 변환
유닉스 타임스탬프 ↔ 날짜 변환
🧩
JSON 인코딩·디코딩
텍스트 ↔ JSON 문자열 리터럴 변환
✨
JavaScript/CSS 포맷팅
JS·CSS 코드 들여쓰기 정리
✂️
JavaScript/CSS 압축(Minify)
주석·공백 제거로 용량 줄이기
🧹
XML 포매팅
XML 태그 구조 들여쓰기 정리
🗃️
SQL 문 정렬
SQL 절 단위로 줄바꿈 정렬
🔣
HTML 엔티티 인코드·디코드
특수문자 ↔ HTML 엔티티 변환
📊
Excel → TABLE TAG 변환
엑셀 표를 HTML TABLE로 변환
⛓️
링크(href, src) 추출
HTML에서 href·src 링크 추출
🎨
컬러 피커
HEX·RGB·HSL 색상 코드 확인
🐘
PHP 구문 검사기
괄호·문자열 짝 검사(실용 검사기)
🗄️
MySQL 구문 검사기
괄호·따옴표 짝 검사(실용 검사기)
🔍
HTML5 검증기
태그 짝·중복id·alt누락 검사
✍️
온라인 HTML 에디터
시각적으로 HTML 작성·편집