HTML 제목 구조 검사기

HTML 제목 구조 검사기 사용 가이드

제목 태그(h1~h6)는 글의 목차와 같습니다. 화면 낭독기 사용자는 제목만 골라 들으며 페이지를 훑고, 검색엔진도 제목 구조로 내용의 큰 갈래를 파악합니다. 디자인 때문에 글자 크기만 보고 h4를 쓰는 식으로 단계가 엉키기 쉽습니다.

이 검사기는 붙여 넣은 HTML에서 제목을 순서대로 뽑아 단계만큼 들여쓴 개요로 보여 줍니다. 첫 제목이 H1이 아니면, 단계를 건너뛰면(H2 다음 H4), 제목이 비어 있으면, 같은 문구의 제목이 여러 번 나오면 각각 몇 번째 제목인지와 함께 알려 줍니다.

H1이 없거나 여러 개면 따로 표시합니다. 여러 H1은 규칙 위반은 아니지만 한 페이지에 하나일 때 주제가 가장 분명하다는 점도 함께 안내합니다. 이미지에 alt가 있는 제목은 비어 있다고 보지 않습니다.

사용 방법

1. 1'검사할 HTML (페이지 소스 전체나 본문 부분)' 칸에 HTML을 붙여 넣습니다.
2. 2'실행'을 누르면 ⚠ 문제 목록과 들여쓴 개요가 나옵니다.
3. 3개요를 보고 목차처럼 자연스럽게 읽히는지 확인합니다.
4. 4글자 크기 때문에 고른 제목 태그는 CSS로 크기를 바꾸고 태그는 단계에 맞게 고칩니다.

<h2>신상품</h2>
<h1>예시상점</h1>
<h2>베스트</h2>
<h4>린넨 원피스</h4>
<h2>베스트</h2>
<h3></h3>

⚠ 첫 제목이 H2입니다. 페이지 주제는 H1로 시작하세요
⚠ 4번째: H2 다음에 H4 — 중간 단계(H3)를 건너뜀
⚠ 6번째 H3가 비어 있습니다
⚠ 같은 제목 "베스트"가 2번 나옵니다

개요
  H2 신상품
H1 예시상점
  H2 베스트
      H4 린넨 원피스
  H2 베스트
    H3 (빈 제목)

이럴 때 쓰면 좋아요

• 블로그 글의 목차 구조를 점검할 때
• 디자인 개편 뒤 제목 태그가 뒤섞였는지 확인할 때
• 웹 접근성 심사 전에 제목 구조 항목을 확인할 때
• CMS 편집기에서 글자 크기만 보고 고른 제목 태그를 정리할 때

문제가 생겼을 때

활용 팁

• 제목 텍스트만 쭉 읽었을 때 글 내용이 요약되면 좋은 구조입니다.
• 숨김 처리된 제목도 HTML에 있으면 개요에 나옵니다. 화면 낭독기도 읽는다는 뜻입니다.
• 읽기 순서와 랜드마크까지 보려면 콘텐츠 읽기 순서 분석기를 함께 쓰세요.

자주 묻는 질문