분류: 개발 도구

HTML 제목 구조 검사기

자체 기획 도구찾는 도구가 없나요?

H1~H6 제목을 개요로 표시하고 구조적 문제를 발견

HTML을 붙여넣으면 H1부터 H6까지의 제목을 문서 개요로 보여주고, 누락된 H1, 여러 개의 H1, 건너뛴 제목 레벨, 빈 제목을 표시합니다. 모든 처리가 브라우저에서 이루어집니다.

H1 개수1문제2
제목 개요
  • H1 How local browser tools work
  • H2 Why run tools in the browser
  • H4 A skipped level
  • H2 Another section
  • H3 (빈 제목)
문제
  • H3 제목에 텍스트가 없습니다.
  • 제목 레벨이 H2에서 H4로 건너뛰었습니다.

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

스크린 리더와 검색엔진 모두 페이지 구조를 이해하기 위해 제목 레벨에 의존하므로, H1이 없거나 H1이 두 개 이상 경쟁하거나 H2에서 H4로 바로 건너뛰면 잘 작성된 페이지라도 탐색하기 어려워질 수 있습니다. 이 도구는 붙여넣은 HTML에서 모든 제목을 문서 순서대로 추출해 들여쓰기된 개요로 보여주고, 템플릿을 편집하는 동안 무심코 발생하기 쉬운 구조적 문제를 표시합니다.

사용 방법

  1. 입력창에 페이지나 글의 HTML을 붙여넣습니다.
  2. 제목 개요가 페이지의 의도된 구조와 일치하는지 확인합니다.
  3. 누락된 H1이나 건너뛴 제목 레벨 등 표시된 문제를 수정합니다.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

제 HTML이 어딘가에 업로드되나요?
아니요. 문서는 브라우저 탭 안의 토크나이저가 텍스트로만 읽으며, 렌더링되거나 서버로 전송되지 않습니다.
건너뛴 제목 레벨이 왜 중요한가요?
보조 기술 사용자는 특정 레벨의 제목 사이를 건너뛰며 탐색하는 경우가 많습니다. H2에서 H4로 바로 건너뛰면 한 섹션이 빠진 것처럼 보이거나 구조를 따라가기 혼란스러워질 수 있습니다.
빈 alt 속성과 빈 제목은 같은 것인가요?
아니요, 서로 관련이 없습니다. 텍스트가 없는 <h3></h3> 같은 빈 제목은 항상 실수이며 여기서도 그렇게 표시됩니다. 반면 이미지의 빈 alt 속성은 다른 패턴이며 흔히 의도적인 것으로, Image Alt Text Auditor(이미지 alt 텍스트 감사 도구)에서 다룹니다.