いまいちよくわからないfigure要素の使い方

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の検索順位には影響しないようなので、迷ったら使わないって選択肢でもいい気がしますけどね。
完全に逃げの姿勢です。
すみません。