質問: 画像キャプションはどうマークアップするのが最適か気になって調べてたらよく分からなくなりました... ### 前提 * とある手順を画像付きで説明している部分のマークアップについての質問です。 * キャプションの外側はolリストを使用します。 (※画像の完成図は少し内容が違ったので削除しました。) ### マークアップ案 * figure+figcaptionを使用する →コンテンツから独立した内容ではないので不適切? * dl,dt,ddを使用する →定義リスト使っていいシーンなのか調べてるうちに分からなくなってきた。 * div+pタグを使用する →一番無難なのは分かる。 できれば2番目の定義リストで組みたいと思いましたが、 MDN web docsを読むとdtは用語を表すなら画像を用いるのは不適切な気がしてきました。 > > 要素は、説明又は定義リストの中で用語を表す部分 > > https://developer.mozilla.org/ja/docs/Web/HTML/Element/dt > > > 一般的?にはどのようにマークアップするのがベターなんでしょうか? また、今回みたいな画像を使う件では定義リストの使用はやはり不適切でしょうか? よろしくお願いします。 ### HTMLコード(追記:20180516) 実際の内容に近いソースを追記しました。 ##### figure+figcaptionを使用する場合 ``` 〇〇導入手順1:△△をしてください。 画像1のキャプション 手順1-1についての説明文 画像2-1のキャプション 画像2-2のキャプション 手順1-2についての説明文 ``` ##### dl,dt,ddを使用する場合 ``` 〇〇導入手順1:△△をしてください。 画像1のキャプション 手順1-1の説明文 画像2-1のキャプション 画像2-2のキャプション 手順1-2の説明文 ``` ##### div+pを使用する場合 ``` 〇〇導入手順1:△△をしてください。 画像1のキャプション 手順1-1の説明文 画像2-1のキャプション 画像2-2のキャプション 手順1-2の説明文 ``` class名などは仮です。 私が思いつくのは上記でした。 説明不足でしたら再度ご指摘いただけますと助かります。
回答: 一概に、どれがいいとは言えません。 画像とそれに続くテキストの関係性がどんなものかによると思います。 **『手順1-1についての説明文』がなくても分かるような画像なら、画像と手順の見出しで独立すると思うので、figure+figcaptionがいいと思います。** 無難なのは、div+pですが、 場合によってはh3を利用してもいいと思います。 ``` 手順1-1の見出し 手順1-1の説明文 ``` ``` 手順1-1の見出し 手順1-1の説明文 ``` dl,dt,ddをもし利用するなら、手順の見出しがdt、手順の説明がddになるような気がします。 画像がどんなものかにより2パターン考えられます。 ``` 画像1のキャプションかつ手順1-1の見出し 手順1-1の説明文 ``` ``` 手順1-1の見出し 手順1-1の説明文 ``` 結局は、組みやすさでいいような気もします。。。