figureタグ・figcaptionタグの意味

まいど!いつもご覧頂いて有難うございます。
大阪でサブスク運用のホームページ制作を行っているドスブイサポートです。

HTML5から使用可能となったfigureタグですが、SEO対策にもなる有能なタグです。

figureタグやfigcaptionタグを使ってより分かりやすいWebサイト制作を目指しましょう。

今回は、figureタグとfigcaptionの解説を行いたいと思います。

figureタグ・figcaptionタグとは?

figure

HTML5で採用されたfigureタグとfigcaptionタグですが、使い方がいまいち分からないって方も多いと思います。
私もその中のひとりでした。

<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文(メインフロー)から参照されるようなイラスト・図・写真・ソースコードなどのことです。

今日に至っては、CSSだけで図や表、突き詰めたらimgで画像貼り付けなくても作れますよねそれをこのタグで囲ってやることで恩恵を受けれるって感じです。

figcaption

<figcaption>タグは、図表のキャプションを示す際に使用します。 <figure>~</figure>の中に配置すると、図表にキャプションを付けることができます。

キャプションとは
(記事・論説などの)表題、タイトル、(章・節・ページなどの)見出し、(新聞・雑誌などの)写真の説明文、(映画・テレビの)字幕 の意味

要するにfigureで図表を指定してやって、その図表の説明をfigcaptionしてやるって事です。

まとめ

imgタグやPタグでも構成はもちろんできますが、
綺麗に書くなら新しくできたタグを使ってコーディングしたいですね!

最後までご覧いただき有難うございました!

お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。

お問い合わせフォーム

» 高橋しゃちょー (@osaka_dos) | Twitter