【alt属性との違いは?】htmlのfigcaption要素とは? 使い方・読み方も分かりやすく解説!

figcaption要素について知りたい人

figcaption要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

figcaption要素は親要素となるfigure要素の内容に写真、挿絵、図表、コードなどの内容を表す説明文を追加するためのものです。

figcaption要素はfigure要素内のはじめかおわりのどちらかにのみ配置することができます。

figcaption要素を使用することで、文書構造を分かりやすくできるのでSEO対策にもなります。

そこでこの記事ではfigcaption要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

figcaption要素の評価

頻出度

(3.0)

重要度

(3.0)

総合評価

(3.0)

figcaption要素は図表のキャプションを示す際に使用します。

figure要素内にfigcaption要素を配置すると、図表にキャプションを付けることができます。

それではfigcaption要素の使い方をみていきましょう。

・・・

<figure>
 <img src="top-image.png" alt="トップ画像">
 <figcaption>HTML&CSS辞典のトップ画像です。</figcaption>
</figure>

・・・

上記の例ではfigure要素でトップ画像を表し、figcaption要素でトップ画像についてのキャプションを記述しています。

このようにfigure要素に対してfigcaption要素を用いることで構造的に整理できます。

文書構造が理解しやすくなると、検索エンジンのクローラーが、Webサイトのページを見つけやすくなります。

クローラーは収集した情報に基づいて検索結果の順序が決定します。

そのため、HTMLの文書構造を分かりやすくすることは、SEO対策の1つになります。

alt属性は画像に関する情報を記載するためのものです。

万が一画像が表示されなかったときに代替手段として表示させるための文言と定義され、代替テキストとも呼ばれています。

figcaption要素は写真、挿絵、図表、コードなどの内容を表す説明文であるため、alt属性とは用途が異なります。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

リンク

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント