画像キャプションはどうマークアップするのが最適か気になって調べてたらよく分からなくなりました…
前提
- とある手順を画像付きで説明している部分のマークアップについての質問です。
- キャプションの外側はolリストを使用します。
(※画像の完成図は少し内容が違ったので削除しました。)
マークアップ案
- figure+figcaptionを使用する
→コンテンツから独立した内容ではないので不適切?
- dl,dt,ddを使用する
→定義リスト使っていいシーンなのか調べてるうちに分からなくなってきた。
- div+pタグを使用する
→一番無難なのは分かる。
できれば2番目の定義リストで組みたいと思いましたが、
MDN web docsを読むとdtは用語を表すなら画像を用いるのは不適切な気がしてきました。
<dt> 要素は、説明又は定義リストの中で用語を表す部分
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dt
一般的?にはどのようにマークアップするのがベターなんでしょうか?
また、今回みたいな画像を使う件では定義リストの使用はやはり不適切でしょうか?
よろしくお願いします。
HTMLコード(追記:20180516)
実際の内容に近いソースを追記しました。
figure+figcaptionを使用する場合
HTML
1<h2>〇〇導入手順1:△△をしてください。</h2> 2<ol> 3 <li> 4 <figure> 5 <img src="xxx.png" alt="画像1"> 6 <figcaption>画像1のキャプション</figcaption> 7 </figure> 8 <p>手順1-1についての説明文</p> 9 </li> 10 <li> 11 <div class="flow-image-wrap"> 12 <figure> 13 <img src="yyy.png" alt="手順2-1"> 14 <figcaption>画像2-1のキャプション</figcaption> 15 </figure> 16 <figure> 17 <img src="zzz.png" alt="手順2-2"> 18 <figcaption>画像2-2のキャプション</figcaption> 19 </figure> 20 </div> 21 <p>手順1-2についての説明文</p> 22 </li> 23</ol>
dl,dt,ddを使用する場合
HTML
1<h2>〇〇導入手順1:△△をしてください。</h2> 2<ol> 3 <li> 4 <dl> 5 <dt><img src="xxx.png" alt="画像1"></dt> 6 <dd>画像1のキャプション</dd> 7 </dl> 8 <p>手順1-1の説明文</p> 9 </li> 10 <li> 11 <div class="flow-image-wrap"> 12 <dl> 13 <dt><img src="yyy.png" alt="画像2-1"></dt> 14 <dd>画像2-1のキャプション</dd> 15 </dl> 16 <dl> 17 <dt><img src="yyy.png" alt="画像2-2"></dt> 18 <dd>画像2-2のキャプション</dd> 19 </dl> 20 </div> 21 <p>手順1-2の説明文</p> 22 </li> 23</ol>
div+pを使用する場合
HTML
1<h2>〇〇導入手順1:△△をしてください。</h2> 2<ol> 3 <li> 4 <div class="flow-image-wrap"> 5 <img src="xxx.png" alt="画像1"> 6 <p>画像1のキャプション</p> 7 </div> 8 <p>手順1-1の説明文</p> 9 </li> 10 <li> 11 <div class="flow-image-wrap"> 12 <div class="flow-image2"> 13 <img src="yyy.png" alt="画像2-1"> 14 <p>画像2-1のキャプション</p> 15 </div> 16 <div class="flow-image2"> 17 <img src="yyy.png" alt="画像2-2"> 18 <p>画像2-2のキャプション</p> 19 </div> 20 <p>手順1-2の説明文</p> 21 </li> 22</ol>
class名などは仮です。
私が思いつくのは上記でした。
説明不足でしたら再度ご指摘いただけますと助かります。
回答1件
あなたの回答
tips
プレビュー