figcaptionタグ figureの注釈を表す

HTMLの<figcaption>フィギュア・キャプションタグは、親要素の<figure>の内容にキャプション（注釈）をつける役割をします。具体的には<figure>内に含まれるの図表や写真、イラスト、引用文についての説明などを記入します。

<figure>
  <img src="/learning/images/ogp.png" alt="コードキッチンの画像">
  <figcaption>コードキッチンのカバー画像</figcaption>
</figure>

✍️<figure>と<figcaption>は合わせて使います。<figure>については、こちらのページで解説しています。

関連するページを読む

figureタグの使い方 - HTML

figcaptionタグの使い方

figureの中で使う

<figure>
  <img src="/learning/images/ogp.png" alt="コードキッチンの画像">
  <figcaption>コードキッチンのカバー画像</figcaption>
</figure>

👆<figcaption>は親要素が<figure>でなければなりません。単体で使用するものではありません。

キャプションをコンテンツの前に配置してもOK

<figure>
  <figcaption>キャプションを前に</figcaption>
  <img ~>
</figure>

👆キャプション（<figcaption>）の配置場所は、コンテンツ（図表や画像など）の前でも後でもOKです。

キャプションの中にリンクや出典を入れてもOK

リンクを含める例

<figure>
  <img ~>
  <figcaption>
    日本の人口推移（<a href="https://www.stat.go.jp/">統計局のウェブサイト</a>より）
  </figcaption>
</figure>

👆必要であればキャプションの中にリンクなどの記述コンテンツを含めることができます。

citeを含める例

<figure class="figure-quote">
  <blockquote>
    <p>成功する人は「思い通りに行かない事が起きるのはあたりまえ」という前提で挑戦している。</p>
  </blockquote>
  <figcaption>
    <cite>トーマス・エジソン名言集</cite>
  </figcaption>
</figure>

👆引用文であれば、引用元の名前（<cite>タグ）を含めると良いでしょう。

複数の画像が含まれる場合、それら全体への注釈を表す

<figure>
  <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1556089793/posts/paaf7thkxsvl4hvoizzc.png" alt="ハッカーの画像">
  <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1556097503/posts/mfskerv6nmoag9sjoudm.png" alt="ハッカーの画像">
  
  <figcaption>想像上のハッカー</figcaption>
</figure>

👆<figure>内に複数のコンテンツ（画像等）が含まれる場合、<figcaption>はそれら全体に対するキャプションとなります。
1つのキャプションで表現できないのであれば、そもそも別の<figure>に分けて載せるべきです（<figure>は1つのまとまりを表すものです）。