01
원본 보존하기
예제나 지우기는 먼저 교체 문자 수를 보여 줍니다. 적용 뒤 한 번 되돌리면 입력과 결과가 함께 복원됩니다.
- 예제에는 인라인 띄어쓰기와 pre 안의 줄바꿈이 들어 있습니다.
HTML 도구
HTML 포맷터태그 구조를 읽기 쉽게
자동 정리는 입력이 350ms 멈추면 실행됩니다. 압축은 직접 누르고 구조 알림에서 원본 줄로 이동하세요.
HTML 포맷터
HTML 원본
결과
HTML은 현재 탭에서 처리됩니다. 정적 미리보기는 스크립트와 외부 요청을 차단합니다.
HTML을 붙여넣거나 예제를 불러오세요.
CMS에서 복사한 HTML이 한 줄로 뭉쳐 있으면 어느 태그가 내용을 감싸는지 찾기 어렵습니다. HTML 포맷터는 구조 태그 사이만 정리하고 인라인 문장과 보호된 블록의 공백은 그대로 둡니다.
태그 목록과 진단에서 원본 줄로 이동할 수 있습니다. 여기에 표시된 문제는 조사 단서이며, 표준 준수 여부는 전문 검사기로 확인해야 합니다.
HTML 포맷터를 쓰는 이유
원문을 유지하면서 계층 확인
HTML 포맷터가 구조 태그를 들여쓰기로 펼치고 위치를 표시합니다. pre, textarea, script, style의 내부 내용은 다시 쓰지 않습니다.
선택할 때만 열리는 미리보기
HTML 포맷터의 정적 미리보기는 별도 샌드박스에서 실행됩니다. 스크립트, 폼과 외부 리소스 요청이 차단됩니다.
결과를 가져가기 전 세 가지 확인
02
실행 시점 고르기
기본 자동 정리는 입력이 350ms 멈추면 실행됩니다. 끄면 Ctrl/Cmd+Enter로 실행하고, 압축은 언제나 직접 눌러야 합니다.
- 들여쓰기 옵션을 바꾸면 기존 결과가 즉시 만료되어 내보낼 수 없습니다.
03
위치와 크기 확인하기
구조 항목이나 진단을 누르면 원본 줄과 열로 이동합니다. 바이트 차이와 격리된 미리보기도 함께 확인하세요.
- 진단이 없어도 HTML 표준 검사를 통과했다는 뜻은 아닙니다.
읽고 줄이고 위치 찾기
조심스러운 들여쓰기
구조 태그 사이에만 줄바꿈을 넣고 인라인 문장이나 속성 순서를 바꾸지 않습니다.
명시적 압축
원본에서 간결한 결과를 만들고 주석과 내장 코드를 보존하며 UTF-8 바이트 수를 비교합니다.
원본 줄로 가는 구조 목록
HTML5 파서가 만든 계층과 브라우저가 보충한 노드를 구분해 보여 줍니다.
격리된 정적 미리보기
현재 결과만 볼 수 있고 스크립트, 폼, 외부 로드는 실행되지 않습니다.
검사 범위와 실제 한계
- 표준 검증이 아닙니다
- HTML 포맷터는 위치가 있는 파싱 문제와 닫는 태그 누락 가능성을 보고합니다. 모든 콘텐츠 모델이나 접근성 규칙까지 검사하지 않습니다.
- 공백이 화면에 영향을 줄 수 있습니다
- 인라인 간격과 보호 블록은 유지하지만 CSS white-space 설정에 따라 구조 태그 사이 공백도 의미가 있을 수 있습니다.
- 템플릿을 고치지 않습니다
- Vue, JSX, Liquid 문법을 전용 방식으로 분석하지 않으며 브라우저가 보충한 태그를 원본에 기록하지 않습니다.
- 추가 처리 범위는 제외합니다
- URL 가져오기, 일괄 업로드, 주석 삭제, 속성 정렬, HTML 안의 CSS와 JavaScript 압축은 제공하지 않습니다.
HTML 포맷터 자주 묻는 질문
HTML 포맷팅과 압축은 어떻게 다른가요?
포맷팅은 구조를 읽기 쉽게 들여쓰고, 압축은 구조 사이의 여분 공백을 줄입니다. 둘 다 원본을 덮어쓰지 않습니다.
포맷터가 잘못된 HTML 태그를 수정하나요?
아니요. 위치가 있는 파싱 문제와 닫는 태그 누락 가능성을 알려 줄 뿐, 자동으로 태그를 고치지 않습니다.
스크립트와 스타일 내용도 바뀌나요?
아니요. script와 style 내부를 그대로 보존합니다. 내장 JS나 CSS를 별도로 압축하지도 않습니다.
포맷팅하면 페이지 표시가 달라지나요?
대부분 구조 배치만 달라지지만 CSS 공백 규칙에 따라 표시가 바뀔 수 있으니 실제 레이아웃에서 비교하세요.
입력한 HTML이 서버로 전송되나요?
아니요. 현재 브라우저 탭에서 처리하며 정적 미리보기는 직접 열어야 하고 외부 요청도 차단합니다.
예상하지 못한 결과가 나왔나요?