BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

html5のfigureとfigcaptionの使い方

2022-02-01 12:44:52

figureタグとfigcaptionタグは、html5で追加された新しいセマンティックタグです。

html5のセマンティックタグであるfigureタグ。

単体のストリームコンテンツ（画像、図表、写真、コードなど）を指定するために使用します。

figcaption タグ、html5 のセマンティックタグです。

figure と共に使用し、定義の figure 要素のタイトルにタグ付けする。

figureタグとfigcaptionタグを使用するメリット

検索エンジンはfigureを検索するとき、それが画像、図、写真、コードなどのメディアを保持していると認識し、記事などの他のものを保持しているとは考えない。その方が検索エンジンにとって、より速く、より簡単に検索できるのです。
一方、プログラマーはこのタグを見れば、ここに存在するのは画像などのメディアであるとわかるので、読みやすくなるのです。

次の図は、この2つのタグの使い方を簡単に説明したものです。

ケース1

タイトルを除いたfigure要素です。 

<figure>
    <img alt="Script House" src="logo.png"/>
</figure>

ケース2

タイトルを持つfigure要素。 

<figure>
    <img alt="Script House" src="logo.png"/>
    <figcaption> Script House, Script House is a domestic professional website building resources, scripting programming learning website, providing asp, php, asp.net, javascript, jquery, vbscript, dos batch, web production, network programming, website building and other programming materials</ figcaption>
</figure>

ケース3

複数の画像があり、figure要素に同じキャプションがある。 

<figure>
    <img alt="Script House 1" src="logo1.png"/>
    <img alt="Script House 2" src="logo2.png"/>
    <img alt="Script House 3" src="logo3.png"/>
    <figcaption> Script House, Script House is a domestic professional website building resources, scripting programming learning website, providing asp, php, asp.net, javascript, jquery, vbscript, dos batch processing, web production, network programming, website building and other programming materials</ figcaption>
</figure>

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します