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

Question

В настоящее время у меня есть упорядоченный список, который я хочу разметить, используя новые атрибуты 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>

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

Answer 1

Если вы используете список для добавления семантики в хронологическом порядке к публикациям в блоге, и, как @Tomas упомянул, что каждая статья является автономной, то ваш код в порядке (хотя я бы удалил содержащую 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 {} и т. Д.

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

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

Answer 2

Согласно проекту последнего редактора :

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

Насколько я понимаю, ваше семантическое использование совершенно нормально, хотя я действительно должен поставить под сомнение ваше использование списка. Учитывая, что каждая статья, вероятно, содержит гораздо больше текста, чем пара строк, неупорядоченный список, кажется, делает вещи неясными. Я полагаю, что вы «откажетесь» от маркеров и т. Д. С помощью 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>