HTML5から追加された <figure> 要素について、調べてもいまいちよくわからないのでまとめてみました。
結論から言っていまだにいまいちしっくりきてません。
とりあえず HTML Living Standard と MDN を参考にしています。
https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element
https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure
figure 要素とは
HTML Living Standard では以下の特徴を持つものを <figure> 要素として定義しています。
- 要素内のコンテツに対して、必要に応じてキャプションを持つことができる
- 自己完結型
- ドキュメントのメインフローから単一のユニットとして参照される
まずはここから見ていきましょう。
必要に応じてキャプションを持つことができる
キャプションとは説明文とか凡例とかのことを指します。
教科書とかでよくある、写真とか表の下についてるやつですね。
キャプションは <figcaption> 要素で記述します。
<figure> <img src="川の画像.jpg" alt="すごく流れの速い川"> <figcaption>図1：すごく流れの速い川</figcaption> </figure>
たしかに、キャプションを持つことができる要素というのは今まで <table> しかありませんでした。
あれ、キャプション使うのって表だけじゃなくね？ と気づいた結果生まれたのが <figure> 要素なのだと思われます。
自己完結型
自己完結型、というとなんかスタンドの説明みたいですが、自己完結型とはどういう意味でしょうか？
HTML Living Standard の例によると、
段落内の文は自己完結型であるが、文の一部分は自己完結型でない
とのことです。
少し意外ですが、段落だけでなく、その中の1文だけ抜き取った場合でも自己完結型というようです。
まずはここから見ていきましょう。
こんな感じで適当に1文抜き取った場合も自己完結型になるみたいですね。
何も完結していないように見えますが、この場合は「まずはここから見ていきましょう。」という文章を引用して使っていて、前後の文章も成り立っているので自己完結型と言えるようです。
「まずはここから見ていきましょう。」自体の文の意味は関係なく、前後から独立（文の途中じゃない）していることが重要ということでしょうか。
ここらへん、英語のニュアンスとかも関わってきそうで、書いてて正直自信ないです。
ドキュメントのメインフローから単一のユニットとして参照される
横文字が多くてわかりづらいですが、要は本文から参照されるということでしょう。図1のような川で遊ぶのはやめましょう。
みたいな感じですね。
ちなみにこの参照方法について、HTML Living Standard では「上図のような」という相対参照より「図1のような」といった絶対参照を使うことを推奨しています。
理由として、<figure> 要素の特徴に「ページのどこに置いても問題ないし、なんなら別ページに置いても問題ない」というものがあり、「上図のような」という参照の仕方だと場所が限定されてしまうからです。
figure 要素の対象となるもの
イラスト、図、写真、コードスニペットなどが挙げられています。
おそらく、これら以外にも色々なものに使用可能だと思います。
重要なのは、本文から参照されていて、かつ独立したものかどうか、でしょうね。
figure 要素を使うべきかどうか、僕の判断でリスト化してみました。
- 本文に関わるデータのグラフ → figure要素
- 説明用のコードスニペット → figure要素
- メインビジュアルの画像 → figure要素 ではない
- 引用文 → blockquote要素
- キャプション付きの引用文 → blockquote要素をfigure要素で囲う（自信ない）
- ブログ記事のアイキャッチ画像 → figure要素 ではない
アイキャッチ画像はちょっとよく分からんな…
本文から参照するほどの重要な情報が載ってるならfigure要素なのかな。
表紙みたいなものなのでfigure要素ではないと判断しましたが、あなたはどう思いますか？（雑なフリ）
まとめ
こんな感じで一通りfigure要素の定義はみましたが、「完全に理解した！」とは正直言えませんね。
僕としては教科書に出てくるキャプション付きの写真をイメージしてるんですが、そんな解釈でいいのでしょうか？
調べた感じfigure要素自体はGoogleの検索順位には影響しないようなので、迷ったら使わないって選択肢でもいい気がしますけどね。
完全に逃げの姿勢です。
すみません。
