Допустимо ли включать список определений в тег ‹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> внутри одного и того же.
  • С.О. пользователь разместил косвенно связанный вопрос, но я заметил в их разметке некоторые теги <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 будет совместимо с любым браузером на любом устройстве. Вы можете использовать атрибут title, если хотите. Вы также можете иметь любой атрибут, если он начинается с data-

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

person Scott Selby    schedule 25.06.2014