Должны ли несколько элементов ‹article› в ‹разделе› помещаться в теги ‹ul›?

Я использую новые теги HTML5, и мне было интересно, какой из следующих двух вариантов предпочтительнее:

ОПЦИЯ 1

<article class="menu">
  <section>
    <header>
      <h4>Breakfast</h4>
    </header>
    <ul>
      <li>
        <article class="menu-item">Cereal</article>
      </li>
      <li>
        <article class="menu-item">Bacon & Eggs</article>
      </li>
      <li>
        <article class="menu-item">Waffles</article>
      </li>
    </ul>
  </section>
  <section>
    <header>
      <h4>Lunch</h4>
    </header>
    <ul>
      <li>
        <article class="menu-item">Peanut Butter & Jelly</article>
      </li>
      <li>
        <article class="menu-item">Ham Sammich</article>
      </li>
      <li>
        <article class="menu-item">Soup</article>
      </li>
    </ul>
  </section>
</article>

ВАРИАНТ 2

<article class="menu">
  <section>
    <header>
      <h4>Breakfast</h4>
    </header>
    <article class="menu-item">Cereal</article>
    <article class="menu-item">Bacon & Eggs</article>
    <article class="menu-item">Waffles</article>
  </section>
  <section>
    <header>
      <h4>Lunch</h4>
    </header>
    <article class="menu-item">Peanut Butter & Jelly</article>
    <article class="menu-item">Ham Sammich</article>
    <article class="menu-item">Soup</article>
  </section>
</article>

Я сейчас использую первый вариант с тегами из-за привычек, оставшихся с HTML 4.01, однако мне кажется, что в HTML5 они совершенно избыточны и не нужны. Что более правильно?

Например, в этой статье здесь не используются теги: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques.-youll-soon-be-using/


html html-lists semantic-markup
person Andrew De Andrade    schedule 19.11.2010    source источник
comment
Исправлена. Я забыл, как утомительно обычный HTML по сравнению с HAML.   -  person Andrew De Andrade    schedule 20.11.2010

Ответы (2)


arrow_upward
2
arrow_downward

Должен? Не обязательно. Могу? Да.

У меня есть ситуация, в которой я делаю что-то похожее на ваш первый пример с ‹figure>. В этом случае содержащим элементом является ‹nav>. Рисунки представляют собой список предметов с фото и названием. Это список элементов навигации, которые также являются цифрами. Таким образом nav › ... › li › фигура.

Фигура, конечно, не артикль. Но это разрешено спецификацией как с ‹figure>, так и с ‹article>. Разрешенным содержимым ‹li> является «текущее содержимое», которое включает в себя:

раздел или навигация или статья или в стороне или верхний колонтитул или нижний колонтитул< /em> или рисунок

Среди прочих. Весь список длинный. Так что это зависит от того, что кажется вам правильным в вашей конкретной ситуации.

  • Являются ли эти сводки статей, служащие для перехода к полному тексту статей, упорядоченными по дате? Я мог бы сделать что-то похожее на то, что я сделал выше с фигурой, если бы я хотел, чтобы ‹li> был дополнительным контейнером или потому что мне это нравилось.
  • Это полный текст статей, а не список статей? Опустить список.
person morewry    schedule 19.11.2010
comment
Это пункты меню ресторана. Это не статьи в газетах или блогах, но это уместное использование, учитывая все, что я читал от таких людей, как Брюс Лоусон и Хикси. Однако, чтобы ответить на ваш вопрос, они будут краткими со ссылкой на полную страницу позже. - person Andrew De Andrade; 20.11.2010
comment
кивнуть Я тоже так понимаю. & Мне нравится версия списка в этом сценарии, но любая из них определенно работает. :-) - person morewry; 21.11.2010

arrow_upward
0
arrow_downward

HTML, какой бы версии он ни был, — это всего лишь семантическая разметка для набора данных. Если использование списка для разделения статей имеет семантический смысл, то это правильный способ. Если это не так, то это неправильно. Если вы просто беспокоитесь о минимальных байтах для отправки по сети, то вы можете обойтись без списка в любой версии html и заменить его тегами абзаца.

Обычно семантическая разметка больше связана с тем, как вы представляете данные, чем просто с данными. Например, если вы хотите использовать что-то вроде EasySlider, то вам нужно поместить элементы в список, потому что это соглашение, которое он использует. Одни и те же данные, представленные по-разному, могут потребовать совершенно другой разметки.

person Nick Larsen    schedule 19.11.2010