SOYOYU
표

<caption>

table의 제목·설명. table의 첫 자식이어야 한다.

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

SEO

●●●○○중간

표의 주제 설명. Table Snippet에 caption 노출.

GEO

●●●●○높음

AI가 표의 목적을 인식. 비교 답변 인용 시 caption이 컨텍스트.

AEO

●●●○○중간

표 답변 카드의 제목으로 표시 가능.

A11y

●●●●○높음

스크린리더가 표 진입 시 첫 발화. 사용자가 어떤 표인지 즉시 인지.

올바른 사용

  • table의 첫 자식
  • 표의 주제를 한 줄로
  • table당 한 개
  • 시각 숨김은 caption-side CSS
기본 caption
<table>
  <caption>요금제별 기능 비교 (2026년 6월 기준)</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

표 진입 시 스크린리더가 caption 먼저 발화.

시각 숨김 caption
<table>
  <caption class="sr-only">검색 결과 30개</caption>
  ...
</table>

시각적으로 표시 안 해도 스크린리더에는 발화. sr-only 패턴.

caption 안 추가 정보
<table>
  <caption>
    분기별 매출
    <span class="text-sm">(단위: 백만 원)</span>
  </caption>
</table>

caption 안에 인라인 추가 정보 OK.

자주 보는 안티패턴

  • caption 누락
  • caption이 첫 자식 아님 (HTML 명세 위반)
  • p나 h2로 표 제목 (table 외부에)
  • caption 시각 숨김에 display:none (스크린리더도 누락)
caption 누락
<table>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

표가 무엇에 관한지 모름. 스크린리더 사용자에게 표의 정체성 부재.

table 외부 제목
<h3>요금제 비교</h3>
<table>
  <thead>...</thead>
</table>

h3과 table의 연결이 명시적이지 않음. caption이 시맨틱 정답.

해설

표의 제목과 설명. table의 첫 자식이어야 시맨틱 작동. 스크린리더가 표 진입 시 caption을 가장 먼저 발화해 사용자가 어떤 표인지 인지.

SEO 관점에서 caption은 Table Snippet의 제목으로 노출. "X 비교 표" 같은 표 자체의 SEO에 직접 작용. 검색 결과에 표가 노출될 때 caption이 카드 제목.

GEO 관점에서 AI가 표의 주제와 컨텍스트를 인식하는 1순위 신호. "요금제별 기능 비교 (2026년 6월 기준)" 같은 caption이 있으면 AI가 언제, 무엇에 관한 표인지 정확히 인지. 비교 답변 인용 정확도 ↑.

A11y 관점에서 스크린리더의 표 오리엔테이션. 사용자가 표 진입 시 caption을 듣고 지금 어떤 데이터를 보고 있는지 인지. caption 없으면 익명의 행-열 데이터 — 사용자가 컨텍스트를 잃는다.

자주 보는 안티패턴: caption 누락(가장 흔함 — 표 자체는 있는데 무엇에 관한인지 시맨틱 없음), caption이 첫 자식 아님(HTML 명세 위반 — <table><thead><caption>...는 잘못, caption은 반드시 table의 첫 자식), table 외부 제목(h3 + table 분리 패턴은 명시적 연결 없음 — caption이 시맨틱 정답), caption 시각 숨김에 display: none(스크린리더도 발화 안 함 — 시각만 숨기려면 sr-only CSS).

caption-side CSS — caption을 표 위 또는 아래에 배치. 기본은 위. 디자인에 따라 caption-side: bottom. 시각 위치만 변경, 시맨틱은 동일.

caption 안 콘텐츠 — flow content이지만 블록 요소는 제한적. p, ul 같은 블록은 안 됨. 인라인 요소(span, em, strong, code 등)는 OK.

표 제목을 h3로 두는 패턴 — 공식 명세상 caption이 시맨틱 정답이지만 — 실무에서는 h3 + table 패턴도 자주 보인다. 차이:

  • caption: 표 자체의 일부, 스크린리더가 표 진입 시 자동 발화
  • h3 + table: 시각적으로는 같지만 연결이 명시적이지 않음

가장 안전한 패턴은 둘 다: h3로 페이지 구조 헤딩 + caption으로 표 자체의 제목. 두 텍스트가 같거나 보완 관계여도 OK.

시리즈 #7에서 다룬 display: contents로 디자인 자유 패턴에서도 caption은 보존 가능. CSS로 위치만 자유, 시맨틱은 항상 표의 첫 자식.