English 中文 العربية 日本語 Português

<caption>: CAPTION 要素

最終更新：2026-10-13

<caption>CAPTION 要素

テーブルのタイトルです。table の最初の子要素でなければならず、既定では上に表示されます。

カテゴリテーブル
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </caption> タグ
ステータス標準

📝 構文

<table>
  <caption>テーブルのタイトル</caption>
  ...
</table>
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<caption> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： caption は既定でテーブルの上に中央表示されます。CSS の caption-side で下に移動できます。

❓ よくある質問

Qcaption は table の最初の子要素でなければなりませんか？
Aはい。仕様は <caption> を <table> の最初の子要素として要求します。スクリーンリーダーはそれをテーブル名として読み上げます。CSS の caption-side プロパティは表示位置（top/bottom）を変えるだけなので、ソース上の位置の要件は変えられません。
Qcaption と表の外の見出し段落は何が違いますか？
A<caption> はテーブルに意味的に結び付きます。スクリーンリーダーはそれをテーブルのアクセシブルな名称として扱い、この関連はネイティブです。表の外の普通の見出しにはその結び付きがなく、長いページでは「どの表の見出しか」が曖昧になります。テーブルには caption を付けるのがアクセシビリティのベストプラクティスです。
Qcaption の中に長い説明を書けますか？
Acaption には短いテーブル名が向いています（「2026年 四半期別売上データ」など）。長い説明（データの出所や集計基準）は、表の下に <p> で置くか aria-describedby で関連付けるのがおすすめです。caption が長くなると読み上げの効率が落ちます。
<table> <th>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML Tables
HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%