figure要素

次に紹介するのはfigure要素です。

このfigure要素は、文書から参照される、自己完結した部分を表します。分かりにくい言い方ですが、それ単体で何らかの意味を持ち(これはarticle要素と似ていますね)、文書といっしょにしておきたいものということになります。

HTML5ロゴ
HTML5

具体例としては、挿絵などがあります。文章の横のほうに絵が置いてあるやつです。挿絵は絵としてそれ自体完結していて、文章に付属したものとなっています。

今右側に(CSSが有効な場合)HTML5のロゴが表示されています。これもfigcaption要素を用いています。

figure要素

要素の種類

フロー・コンテンツ

セクショニングルート

フロー・コンテンツ。さらに、最初または最後のどちらかにfigcaption要素を子に含むことができる。

意味

自己完結した独立したユニット。

このfigure要素も、ul,ol要素、table要素、blockquote要素などと同じ類の要素です。フレージング・コンテンツではありません。figure要素の使い方は、このページのソースなどを確認するとよいでしょう。

そして、もう一つあるのがfigcaption要素です。これは、figure要素の内容の説明を表します。前々回に紹介した、table要素のcaption要素と同じような使い方ができます。

位置は、figure要素の一番最初か一番最後のどちらかです。

figcaption要素

フロー・コンテンツ

意味

figure要素のキャプション。

このページでは、figure要素は右に寄せてあって文章が回りこむという形になっています。これを実現してくれるのはCSSで、後々解説します。figure要素にはそういう意味がある、ということを覚えておきましょう。