HTMLではキャプション（説明文）は主に表や画像に関連付けられて使用されます。キャプションは、視覚的な要素の内容を明確にし、ユーザーにその目的や文脈を理解してもらうのに役立ちます。このページでは、HTMLのキャプションに関する基本的な情報、具体例、およびキャプションの効果的な使い方について詳しく解説します。

• 表にキャプションを付ける方法
• 画像にキャプションを付ける方法
• アクセシビリティ向上のためのキャプション
• キャプションのベストプラクティス

表にキャプションを付ける方法

表にキャプションを付ける際には、HTMLの<caption>タグを使用します。このタグは<table>タグの直下に配置し、表全体を説明するために使われます。

例:

    
2024年の月ごとの売上データ
    

        
月
        
売上額（万円）
    
    

        
1月
        
100
    
    

        
2月
        
120
    

    

この例では、「2024年の月ごとの売上データ」というキャプションが表全体を説明しています。

画像にキャプションを付ける方法

画像にキャプションを付ける方法はいくつかありますが、最も一般的なのは<figure>タグと<figcaption>タグを使用する方法です。

例:

この例では、画像の下に「美しい山の風景 – 自然の魅力を感じられる景色」というキャプションが表示されます。

アクセシビリティ向上のためのキャプション

キャプションは、視覚的な要素を補完し、アクセシビリティを向上させるために重要です。特に、スクリーンリーダーを使用するユーザーにとって役立ちます。

例:

    
地域別の人口統計（2024年）
    

        
地域
        
人口
    
    

        
都市部
        
500万人
    
    

        
地方部
        
200万人
    

    

この表のキャプションにより、スクリーンリーダーは「地域別の人口統計（2024年）」という文脈をユーザーに提供できます。

キャプションのベストプラクティス

キャプションを効果的に使用するためのベストプラクティスを以下に示します。

• キャプションは簡潔で明確な説明を提供すること。
• 表や画像の内容に関連する情報のみを含めること。
• アクセシビリティを考慮し、スクリーンリーダーが正確に情報を伝えられるようにすること。

例:

この例では、キャプション「図1: 森林エリアの拡大傾向（2000年-2024年）」が画像の文脈を説明しています。