2

バックグラウンド

Swiperを使用してレストランの Web サイト用のスライダーを作成していますが、可能な限りセマンティックにコーディングしたいと考えています。内容を理解していただくために、各スライドには次の 4 つの主な機能があります。

  • 背景画像
  • メニュー カテゴリ (つまり、サンドイッチ)
  • メニュー項目
  • メニュー項目の説明

ビジュアル (そして食欲) が必要な場合:

サンドイッチ カテゴリー スライド

私の解決策

これは、コード化するために私が考えることができる最も意味のある方法でした:

<figure class="swiper-slide">
    <img src="img/hammin-it-up.jpg" alt="" />
    <figcaption>
        <strong class="slider-menu-category">Sandwiches</strong>
        <dl class="slider-menu-item">
            <dt>Hammin' It Up</dt>
            <dd>Fontina Cheese & Blackforest Ham grilled on Texas Toast</dd>
        </dl>
    </figcaption>
</figure>

私の質問

  1. タグ<dl>内で aを使用することは意味的に友好的で w3-OKですか?<figcaption>
  2. クラスを使用するよりも、スライドの「タイトル」(別名カテゴリ) を表示するセマンティックな方法はありますか? これは別の質問だと思いますが、関連していて、投稿のタイトルにすべてを詰め込むことができませんでした...

私の研究

私が行ったことと完全に一致するサイトは見つかりませんでしたが、近いものをいくつか見つけました。

  • MDN には、 内にタグを含む例がいくつかあります。<cite><figcaption>
  • HTML5 Doctorには、同じ内に<a>andがあります。<code>
  • SO ユーザーが間接的に関連する質問を投稿しましたが、マークアップ<p>内の<figcaption>.

w3.orgは、私の方法が間違っていることを示唆するものは何も示していないので、それで問題ないと半信半疑ですが、フィードバックをいただければ幸いです。

4

2 に答える 2