HTML5における<caption>タグの使い方

captionタグは、テーブル(表)にキャプションと呼ばれる、タイトルや説明を入れたいときに使うタグです。今回は、HTML5におけるcaptionタグの使い方をご紹介します。

HTML5におけるcaptionタグの使い方

captionタグは、テーブル(表)にキャプションをつけたいときに使用し、<table>〜</table>の子要素として設置します。一般的なブラウザでは、デフォルトでは、テーブルの上部に表示されます。表示位置は、CSSのcaption-sideで変更可能です。

基本的な使い方は次の通りです。

<caption>
タイトルや説明を書く
</caption>

以下のサンプルコードのように記述したcaptionタグを<table>〜</table>内に配置します。

captionタグは、tableタグ内のtable要素の直後に、1つのみ配置することができます。2つ以上はつけることができないので、<caption>内で段落などをつけてマークアップしてください。

<table>
    <caption>
        <h1>〇〇の統計</h1>
        <p>これは〇〇のデータの説明です。</p>
    </caption>
    <tbody>
        <tr>
            <th>見出しセル</th>
            <td>データセル</td>
        </tr>
    </tbody>
</table>

figure要素内に<table>要素が配置される場合

figure要素内にtable要素のみの場合、キャプションはcaptionタグではなく、figcaptionタグを使用することが推奨されているので、気をつけてください。

まとめ

captionタグはテーブルにタイトルや説明を入れたい場合に使うものです。図表を表すfigureタグの説明をつけたい場合は<figcaption>を使いましょう。


イベント

2017/10/06(金)
UX School(全10回)