Что такое семантически правильный способ использования тега `<article>` в HTML 5 с `<ol>, <ul> и <li>`?

В настоящее время у меня есть упорядоченный список, который я хочу разметки, используя новые атрибуты HTML 5. Это выглядит так:

<ol class="section">
  <li class="article">
    <h2>Article A</h2>
    <p>Some text</p>
  </li>
  <li class="article">
    <h2>Article B</h2>
    <p>Some text</p>
  </li>
  <li class="article">
    <h2>Article C</h2>
    <p>Some text</p>
  </li>
</ol>

Кажется, единственный способ сохранить список И использовать теги HTML 5 - добавить целую кучу ненужных div:

<section>
  <ol>
    <li>
      <article>
        <h2>Article A</h2>
        <p>Some text</p>
      </article>
    </li>
    <li>
      <article>
        <h2>Article B</h2>
        <p>Some text</p>
      </article>
    </li>
    <li>
      <article>
        <h2>Article C</h2>
        <p>Some text</p>
      </article>
    </li>
  </ol>
</section>

Есть ли лучший способ сделать это? Каковы ваши мысли?

Ответ 1

Если вы используете список для добавления семантики хронологического порядка к сообщениям в блоге, а также как @Tomas упоминает, что каждая статья является автономной, тогда ваш код в порядке (Id удаляет содержащее section хотя - его без названия и ненужное).

Однако, как вы говорите, есть дополнительная надбавка. Если вы хотите использовать меньше HTML, вы можете удалить список. Вы можете подумать, что тогда вы потеряли семантику хронологического порядка, но вы можете сделать это лучше, используя time с атрибутом pubdate. Это будет выглядеть так:

<article>
    <header>
        <h2>The lolcat singularity</h2>
        <time datetime="2010-05-24" pubdate="pubdate">Today</time>
    </header>
    <p>…</p>
</article>
<article>
    <header>
        <h2>The internet is made of cats</h2>
        <time datetime="2010-05-23" pubdate="pubdate">Yesterday</time>
    </header>
    <p>…</p>
</article>

Если вы создаете список статей на главной странице, вам нужно будет решить, будет ли контент стоять отдельно (т.е. вы делаете фид из резюме статей). Если это так, то приведенный выше код по-прежнему прекрасен. Если резюме слишком коротки, чтобы быть автономными, вы можете выбрать список, но на этом этапе вы не имеете дело с семантикой статьи, поэтому ваши первоначальные имена классов были бы немного вводящими в заблуждение:

<ol class="article-list">
    <li>
        <h2>Article A</h2>
        <p>Some text</p>
    </li>
    <li>
        <h2>Article B</h2>
        <p>Some text</p>
    </li>
    <li>
        <h2>Article C</h2>
        <p>Some text</p>
    </li>
</ol>

и выберите с помощью .article-list li {} или .article-list h2 {} и т.д.

Fwiw На самом деле я использовал упорядоченный список, содержащий article с time pubdate - подход семантического пояса и подтяжки. Im теперь интересно, должен ли я удалить список самостоятельно:) Вы также можете увлечься hAtom, но обратите внимание, что ARIAs role="article" не должны использоваться в элементах списка.

В то время как HTML5 - это эволюция, вы получите наибольшую выгоду от выкидывания старого кода, начиная с контента и хорошего руководства по спецификации, и маркируя вещи с нуля. НТН!

Ответ 2

В соответствии с последний проект редактора:

Элемент статьи представляет собой автономную композицию в документе, странице, приложении или сайте и предназначен для того, чтобы быть независимо распределяемым или многоразовым, например. в синдикации. Это может быть сообщение в форуме, журнал или статья в газете, запись в блоге, комментарий пользователя, интерактивный виджет или гаджет или любой другой независимый элемент контента.

Как я это интерпретирую, ваше использование совершенно отлично семантически, хотя я действительно должен задать вопрос о вашем использовании списка в первую очередь. Учитывая, что каждая статья, вероятно, гораздо больше текста, чем пара строк, неупорядоченный список просто, похоже, делает вещи скрупулезными. Я предполагаю, что вы "уберете" пули и т.д. С помощью css, и я не понимаю, почему вам нужен маркированный список статей, если страница отображается с отключенным css. Я бы предложил просто

<article>
    <h2>The header</h2>
    <p>Some text</p>
</article>
<article>
    <h2>The header</h2>
    <p>Some text</p>
    <p>And maybe another paragraph</p>
</article>