<h3> — 헤딩 태그 도감 | 소요유(SOYOYU)

올바른 사용

h2의 하위 — 챕터 안 절

h2 없이 h3 시작 금지

카드 그리드의 카드 제목 패턴 빈번

사이드바 박스 제목

h2 안의 절

<article>
  <h2>주요 기능</h2>
  <h3>자동 분석</h3>
  <p>...</p>
  <h3>실시간 알림</h3>
  <p>...</p>
</article>

h2 안의 동등한 절 두 개.

카드 그리드의 카드 제목

<h2>요금제</h2>
<div className="grid">
  <article>
    <h3>Basic</h3>
    <p>월 9,900원</p>
  </article>
  <article>
    <h3>Pro</h3>
    <p>월 29,000원</p>
  </article>
</div>

카드 한 장 = article + h3. 시리즈

자주 보는 안티패턴

h2 없이 h3 시작 (위계 점프)

시각이 작아 h3 — 실제는 h4 의미

카드 제목이 div로 — h3 누락

h2 없이 h3

<h1>제목</h1>
<h3>섹션</h3>

헤딩 위계 점프. 없는 h2의 하위로 들림.

카드 제목 div

<article>
  <div className="card-title">Basic</div>
  <p>월 9,900원</p>
</article>

카드 정체성이 헤딩 목록에서 사라짐. 비교 답변 인용 실패.

해설

h2의 하위 절. 책으로 치면 챕터 안의 작은 단원. 카드 그리드의 카드 제목, 사이드바 박스의 제목, 비교 표의 각 항목 제목으로도 자주 등장.

SEO 관점에서 h3는 페이지의 세부 구조 신호. 같은 페이지 안에서 h1 → h2 → h3로 주제 → 챕터 → 절의 위계가 명확하면 — 검색엔진이 페이지의 주제 깊이를 정확히 평가한다. h2 안에 h3가 여러 개면 그 챕터는 여러 절을 가진다는 정보가 자동 전달.

GEO 관점에서 AI가 답변을 더 구체적으로 만들 때 h3 단위 인용이 등장한다. "이 사이트의 Pro 요금제 가격은?" 같은 구체적 질문에 — h2 "요금제" 아래의 h3 "Pro"가 인용된다. 비교 페이지·리스트 페이지·카드 그리드 페이지에서 특히 효과.

AEO 관점에서 h3 + 짧은 본문 쌍이 카드형 답변의 표준. "각 요금제의 특징은?"에 h3 "Basic" / h3 "Pro" 단위로 답변 카드가 만들어진다.

A11y 관점에서 스크린리더 헤딩 목록의 세부 단계. 사용자가 큰 챕터 안의 어떤 절로 가고 싶을 때 h3 단위 점프 가능. 카드 그리드에서 각 카드의 제목이 h3면 — 사용자가 카드 단위로 빠르게 훑어보기 가능.

자주 보는 안티패턴: h2 없이 h3로 시작(위계 점프), 카드 그리드의 카드 제목이 div(헤딩 목록에서 카드들이 사라져 사용자가 카드 단위 탐색 불가), 시각 크기가 작다는 이유로 h3로 마크업했는데 실제로는 h4의 의미(시각이 아닌 의미적 위계가 기준).

카드 그리드 패턴 — 시리즈 #7 table에서 봤듯 데이터는 table이 표준이지만, 카드 그리드는 이미지·아이콘·풍부한 콘텐츠가 섞일 때 정당. 그 경우 각 카드 = article + h3가 표준. 도감의 hub 페이지(/codex)도 이 패턴 — 카테고리별 article + h3 of 60장 카드.

h4 이하는 별도 카드로 다루지 않는다 — 대부분의 페이지에 h4 이하는 등장하지 않으며, 등장하더라도 h3와 같은 규칙(위계 유지, div로 대체 금지, 시각이 아닌 의미 기준)이 그대로 적용된다.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설