HTML Tag Reference

caption 要素

表組みのタイトルを表す

caption 要素は表組みのタイトルを表します。

HTML 4.01 などでの caption 要素では、インライン要素のみを内包することが可能でしたが、HTML Standard における caption 要素は、コンテンツモデルがフロー・コンテンツとなったことで、table 要素を除くフロー・コンテンツを内包することが可能になりました。

これによって、表組みのタイトルとなるテキストだけでなく、表組みに関する詳細な説明なども入れることが可能になっています。

もし、table 要素が、figure 要素に内包されている状態で、figure 要素の内容この table 要素と figcaption 要素のみとなっている場合、figcaption 要素をキャプションを表すのに使用し、caption 要素は省略するといったマークアップの手法が考えられます。詳しくはサンプルソースをご覧ください。

caption 要素の仕様

カテゴリ
  • なし
コンテンツモデル

ただし、table 要素を子孫に持つことはできません。

この要素を使用できる文脈

table 要素の最初の子要素として

この要素で使用できる属性

caption 要素のサンプルソース

<table>
 <caption>
  <p><strong>1年1組 生徒名簿</strong></p>
  <p>この表は1年1組の生徒名簿です。列1に出席番号、列2に氏名が入り、生徒1名につき1行となります。</p>
 </caption>
 <thead>
  <tr>
   <th>出席番号</th>
   <th>氏名</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>01</td>
   <td>日本太郎</td>
   …省略…
  </tr>
 </tbody>
</table>
<!-- table 要素が figure 要素内で唯一の子要素の場合、figcaption 要素を使用します -->
<figure>
 <figcaption>
  <p><b>生徒名簿</b></p>
  <p>この表は1年1組の生徒名簿です。列1に出席番号、列2に氏名が入り、生徒1名につき1行となります。</p>
 </figcaption>
 <table summary="1年1組の生徒名簿">
  <thead>
   <tr>
    <th>出席番号</th>
    <th>氏名</th>
   </tr>
  </thead>
   …省略…
 </table>
</figure>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。