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

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

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

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

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

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

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

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

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

まとめ

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集