Приемливо ли е включването на списък с дефиниции в таг ‹figcaption›?

Заден план

Използвам Swiper, за да създам плъзгач за уебсайт на ресторант и бих искал да го кодира възможно най-семантично. За да ви даде представа за съдържанието, всеки слайд има четири основни функции:

  • Фоново изображение
  • Категория на менюто (т.е. сандвичи)
  • Елемент от менюто
  • Описание на елемент от менюто

Ако имате нужда от визуализация (и апетит):

слайд за категория сандвич

Моето решение

Това беше най-семантичният начин, за който се сетих да го кодирам:

<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. Дали е семантично удобно и w3-ОК да се използва <dl> в рамките на <figcaption> таг?
  2. Има ли по-семантичен начин за показване на „заглавието“ на слайда (известен още като категория) от използването на клас? Разбирам, че това е отделен въпрос, но е свързан и не можах да натъпча всичко това в заглавието на публикацията...

Моите изследвания

Не можах да намеря сайт с точно съответствие с това, което направих, но намерих някои, които бяха близки:

  • MDN има някои примери с маркер <cite> вътре в <figcaption>.
  • HTML5 Doctor има <a> и <code> вътре в същото.
  • Един S.O. потребителят публикува косвено свързан въпрос, но забелязах в тяхното маркиране някои <p> тагове вътре в <figcaption>.

w3.org не показва нищо, което да предполага моя метод беше неправилно, така че съм полусигурен, че е добре, но всяка обратна връзка ще бъде оценена.


html swiper semantic-markup
person abettermap    schedule 25.06.2014    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Да, dl е разрешено вътре в figure /figcaption : dl е съдържание на поток, а figure/figcaption очаква съдържание на поток според техния модел на съдържание.

Не мисля обаче, че това е най-добрият избор във вашия конкретен пример.

dl всъщност не добавя нищо към разбирането на съдържанието на това figure. Би било подходящо, ако има няколко двойки име-стойност (напр. „Цена“, „Съставки“ и т.н.), но това, което имате в момента, е само заглавие и описание.

strong елементът изглежда не се използва според определението му („силна важност, сериозност или спешност“) тук.

И също така мисля, че категорията/заглавието/описанието всъщност не е надпис за снимката в този случай; според мен тези 4 елемента трябва да са на едно ниво, така да се каже. Но това е отворено за тълкуване и също зависи от контекста, в който ще бъде показано това слайдшоу.

Вместо да използвам figure, мисля, че всеки елемент от менюто трябва да бъде article. Този избор позволява използването на заглавия и header елементи:

<article>
  <img src="" alt="" />
  <header>
    <div>Sandwiches</div>
    <h1>Hammin' It Up</h1>
  </header>
  <p>Fontina Cheese & Blackforest Ham grilled on Texas Toast</p>
</article>
person unor    schedule 25.06.2014
comment
А, да, статията има повече смисъл. Някакви мисли относно използването на ‹h1› за категорията и ‹h2› за елемента от менюто? Това са йерархичните приоритети, които бих искал да постигна. - person abettermap; 03.07.2014
comment
@travelampel: Не бих използвал заглавие за категорията (освен ако нямате няколко елемента от менюто в обхвата на същото заглавие); структурата на документа би била объркваща за четене, когато има няколко заглавия с една и съща категория на едно и също ниво. Ако не харесвате подзаглавието начинът, по който използвах, можете да използвате едно заглавие и да включите и двете, категорията и елемента от менюто (и да оформите тези части по различен начин), но предполагам, че тогава трябва да използвате единствено вместо множествено: <h1>Sandwich: <b>Hammin' It Up</b></h1> - person unor; 04.07.2014

arrow_upward
-1
arrow_downward

използвайте <div> .. </div> за всичко, <figcaption> е разрешено с HTML5

придържането към div ще бъде съвместимо с всеки браузър на всяко устройство. Можете да използвате атрибут за заглавие, ако желаете. Можете също да имате всеки атрибут, стига да започва с data-

и примерът би бил <div class="exampleClass" data-title="My Title" data-info="My other info">

person Scott Selby    schedule 25.06.2014