caption element - by. UXKM

요약 설명

<caption> 요소는 <table> 요소 바로 아래에 위치하며, 표 전체의 제목이나 설명을 제공하는 시맨틱 태그입니다.
화면에 표시될 때는 기본적으로 표의 상단 중앙에 배치되며, 표의 목적이나 내용을 간결하게 요약하여 사용자에게 제공하는 역할을 합니다. 접근성 측면에서도 스크린 리더가 표를 이해하는 데 중요한 정보가 되므로, 복잡한 데이터를 담은 표에는 <caption>을 포함하는 것이 권장됩니다.
<table> 내의 첫 번째 자식 요소로 위치해야 하며, 단 하나의 <caption>만 사용할 수 있습니다.

주요 역할 및 특징

  1. 테이블의 제목 또는 설명 제공
    • 표가 어떤 내용을 다루는지 간략히 설명합니다.
    • 사용자는 표를 보기 전에 <caption>을 통해 표의 목적을 빠르게 파악할 수 있습니다.
  2. 접근성(Accessibility) 향상
    • 스크린 리더가 <caption>의 내용을 먼저 읽어주기 때문에 시각 장애인에게 유용합니다.
    • aria-label 또는 aria-labelledby를 사용할 필요 없이, <caption> 자체로 충분한 설명을 제공할 수 있습니다.
  3. SEO(검색 엔진 최적화) 효과

    검색 엔진은 <caption>의 내용을 참고해 표의 주제를 파악하므로, 키워드를 포함한 설명이 도움이 됩니다.

  4. CSS를 통한 스타일링 가능
    • text-align, font-weight, color 등을 사용해 스타일을 조정할 수 있습니다.
    • 기본적으로 중앙 정렬(브라우저마다 다를 수 있음)로 표시됩니다.
  5. 반드시 <table> 요소의 첫 번째 자식으로 위치해야 함

    <caption>은 <table>의 첫 부분에 있어야 하며, <thead>, <tbody>, <tfoot>보다 우선적으로 위치해야 합니다.

CSS 기본 값

<caption> 요소는 아래와 같은 기본값이 적용됩니다.

caption-side속성의 적용 가능한 값 :
  • 값
  • 설명

  • top [기본값]

    테이블의 위쪽(기본값)

  • bottom

    테이블의 아래쪽

  • block-start

    작성 언어의 블록 시작 부분 (LTR에서는 top, RTL에서는 bottom과 유사)

  • block-end

    작성 언어의 블록 끝 부분 (LTR에서는 bottom, RTL에서는 top과 유사)

  • inherit

    부모 요소의 값을 상속

  • initial

    기본값(top)으로 설정

  • unset

    상속 가능한 경우 inherit, 그렇지 않으면 initial

기본 문법

속성

[align] 더 이상 사용되지 않음, CSS로 대체 <caption align="값">

제목의 위치를 지정합니다.
HTML5에서는 비추천하며, CSS의 caption-side 사용을 권장합니다.

기본 방식(비 권장) :
CSS로 대체(권장) :

예제

기본적인 제목 추가

하단에 위치한 제목 및 CSS로 스타일 조정

접근성을 고려한 aria-label 사용

주의사항

  • <caption>은 반드시 <thead>, <tbody>, <tfoot>보다 먼저 위치해야 합니다.
    즉, <table>의 첫 번째 자식 요소로 사용해야 합니다.
  • <caption>은 테이블의 목적을 설명하는 요소입니다.
    단순한 제목 스타일을 원할 경우 <h2>등의 헤딩 요소를 활용하는 것이 더 적절할 수 있습니다.