<caption> 태그의 정의 및 사용법

<caption> 태그는
오직 부모 테이블의 설명 또는 제목을 나타내는 캡션입니다.

이 태그를 사용하면 테이블의 목적을 명확하고 간결하게 설명함으로써,
사용자가 테이블의 나머지 내용을 확인해야 할지, 아니면 건너뛰어야 할지 결정하는데 도움이 됩니다.

선택적으로 사용할 수 있지만, 사용할 경우에는 부모 테이블을 나타내는 <table> 태그의 첫 번째 자식 요소로만 사용되어야 합니다.

예제

이제 실제 예제로 간단한 테이블을 만들어 보겠습니다.
(CSS를 사용해서 테이블의 구성 요소의 주변에 선을 만들어 구조를 더 명확하게 파악할 수 있도록 스타일을 추가했습니다.)

먼제 '실제 적용된 모습'을 보고 HTML의 구조를 살펴보세요.

실제 적용된 모습
HTML 
<table>
    <caption>분식점 메뉴</caption> <!-- table 태그의 첫 번째 자식 요소로만 사용 -->
    <tr>
        <th>메뉴</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>라면</td>
        <td>5,000</td>
    </tr>
    <tr>
        <td>김밥</td>
        <td>4,000</td>
    </tr>
</table>

설명

<caption> 태그는 선택적으로 사용할 수 있습니다.
하지만, 웹 접근성이나 검색 엔진 최적화 등을 위해 필수 데이터를 가지고 있는 테이블에는 항상 사용하는 것이 좋습니다.

<caption> 태그의 마크업 위치는 매우 중요합니다.
부모 테이블을 나타내는 <table> 태그의 첫 번째 자식 요소로만 사용되어야 합니다. 기술적인 측면뿐만 아니라, 이렇게 위치해야 스크린 리더 및 보조 기술을 사용하는 사용자들에게 복잡한 테이블의 데이터를 확인하기 이전에 해당 테이블의 목적을 명확하고 간결하게 설명함으로써, 사용자가 테이블의 나머지 내용을 읽어서 일일이 확인해야 할지, 아니면 건너뛰어야 할지 결정하는데 도움이 되기 때문입니다.

그렇다면 스타일을 위해서 캡션을 테이블 하단에 배치하기 위해서 <caption> 태그의 마크업 위치를 테이블의 하단으로 옮길 수는 없는 건가요? 걱정할 필요가 없습니다. 마크업 위치를 옯기지 않고 캡션이 테이블에서 보여지는 위치가 하단으로 나타나게 CSS로 스타일할 수 있습니다.

캡션을 테이블 하단에 배치하려면

캡션을 화면에서 테이블을 기준으로 하단에 배치하려면 CSS의 caption-side 속성의 값을 bottom으로 지정하면 됩니다.

CSS 
caption {
    caption-side: bottom;
}

코드 부연설명
caption-side 속성은 테이블 캡션의 위치를 지정합니다. 테이블을 기준으로 위쪽 또는 아래쪽에 배치할 수 있습니다.

실제 적용된 모습

속성

<caption> 태그는 모든 전역 속성을 사용할 수 있습니다.

더 이상 사용되지 않는 속성

예전에는 이 태그만을 위한 다음의 속성이 있었지만
이제는 명세서에서 삭제된 비표준으로 더 이상 사용되지 않으며 사용해서는 안 됩니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

이 속성을 각 브라우저별로 아직까지 지원할 수 있지만 모든 사용자에게 적합하지 않을 수도 있습니다.
구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

  • algin

기술적인 문법 요약

caption 태그의 구문 형식
허용되는 부모 요소 <table>
암시적인 role 속성 값 caption
허용된 role 속성 값 없음

주의할 점

<caption> 태그를 사용할 때에는 다음의 사용상의 주의할 점이 있습니다.

<figure> 태그 내에서의 사용

<caption> 태그를 가진 테이블이 <figure> 태그의 유일한 자식 요소인 경우 <caption> 태그를 사용하기 보다는 <figcaption>을 사용하는 것이 의미론적인 측면에서 더 좋습니다. 이때 <figcaption>은 부모 요소인 <figure>의 첫 번째 자식 요소에 위치해야 합니다.

HTML 
<figure>
    <table>
        <caption>분식점 메뉴</caption>
        <tr>
            <th>메뉴</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>라면</td>
            <td>5,000</td>
        </tr>
        <tr>
            <td>김밥</td>
            <td>4,000</td>
        </tr>
    </table>  
</figure>
HTML 
<figure>
    <figcaption>분식점 메뉴</figcaption>
    <table>
        <tr>
            <th>메뉴</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>라면</td>
            <td>5,000</td>
        </tr>
        <tr>
            <td>김밥</td>
            <td>4,000</td>
        </tr>
    </table>  
</figure>

부모 <table>에 배경색이 설정되어 있을 때

<caption> 태그의 부모 <table>에 CSS의 background-color 속성으로 배경색이 설정되어 있을 때 이 적용된 배경색은 <caption> 태그에 적용되지 않습니다.

HTML 
<table style="background-color: gold;">
    <caption>분식점 메뉴</caption>
    <tr>
        <th>메뉴</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>라면</td>
        <td>5,000</td>
    </tr>
    <tr>
        <td>김밥</td>
        <td>4,000</td>
    </tr>
</table>
실제 적용된 모습

위 '실제 적용된 모습'을 통해 확인할 수 있듯이 테이블의 배경색은 캡션에 적용되지 않습니다.
캡션에도 테이블의 배경색을 동일하게 적용하려면 둘 다 배경색을 지정해야 합니다.

HTML 
<table style="background-color: gold;">
    <caption style="background-color: gold;">분식점 메뉴</caption>
    <tr>
        <th>메뉴</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>라면</td>
        <td>5,000</td>
    </tr>
    <tr>
        <td>김밥</td>
        <td>4,000</td>
    </tr>
</table>
실제 적용된 모습

브라우저 호환성

caption 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<caption> 1 12 1 4

명세서

caption 태그의 명세서 사양
명세서 사양
<caption> HTML Standard
#the-caption-element

참고문헌

같이 보기