web-dev-qa-db-ja.com

HTML5フィギュアとimgの使い方は何ですか

<figure> よりもHTML5 <img> を使用することの特定の利点/使用法はありますか？

<figure>は <figurecaption> なしでは役に立たないと思いますね。

例を挙げて説明すると参考になります。

htmlimagetagsfiguredifference
38
diEcho

画像は厳密にはHTMLページに挿入されません。画像はHTMLページにリンクされます。 <img>タグは、参照画像の保持スペースを作成します。

<figure>要素はメインフローに関連しており、その位置はメインフローから独立しています。削除しても、ドキュメントのフローには影響しません。

から http://dev.w3.org/

img要素は画像を表します。 およびfigure要素は、コンテンツの単位を表します。ドキュメントのメインフローから単一のユニットとして参照され、ドキュメントのメインフローから離れて移動できます ドキュメントの意味に影響を与えません。

19
NullPoiиteя

タグは、本の図または図と同等のコンテンツにcontainerを提供します。 1つ以上の画像、コードのブロック、またはその他のコンテンツでキャプションをグループ化するために使用できます。

言い換えれば、画像と図表をグループ化して、1つまたは複数の画像に1つのキャプションを付けることを可能にすることで、画像や図をより現実的かつ自由に操作できるようになります。

出典： http://www.html-5.com/tags/figure-tag/index.html

8
Viral Jain

HTML5 figureは、caption (figcaption)でimg, videoタグを使用するときに常に使用されます

キャプションテキストと関連する画像（またはその他のコンテンツ）が多数ある場合、ネストされた図要素を使用して、figcaption要素を使用してグループキャプションと個別のキャプションの両方を各インスタンスに関連付けることができます。

<figure role="group">
 <img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it.">
 <figcaption>Charcoal on wood. Anonymous, circa 1423.</figcaption>
</figure>

ここにいくつかの例があります

1
Dipak