Семантический HTML списка статей

Ответ 1

Id использует article для каждого фрагмента (т.е. тизер новостей).

Каждый article содержит элемент h1 для заголовка, элемент img для изображения и p элемент для текста.

Как вы, вероятно, хотите установить ссылку на полную версию, вы можете заключить все элементы в один элемент a (который разрешен только в HTML5) или только заголовок и т.д.

Таким образом, это может выглядеть так:

<article>
  <h1><a href="" title=""><!-- news title --></a></h1>
  <img src="" alt="" />
  <p><!-- news description --></p>
</article>

Используйте только figure, если это изображение должно иметь отдельный заголовок. Описание новостей (здесь содержится в p) обычно не является заголовком для этого изображения.

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

Вы можете использовать ul, но это необязательно. ol, однако, следует использовать, только если порядок действительно имеет смысл для понимания содержимого (т.е. другой порядок изменит значение документа). Типичный пример: если элементы ранжируются по релевантности (например, наиболее подходящий тизер вверху), вы должны использовать ol.

Относительно вашего вопроса, если тизер должен быть article:

Не путайте article (элемент HTML5) с термином "статья" (английский язык). article имеет отдельное определение, которое не обязательно имеет какое-то отношение к пониманию термина "статья".

Тизер также должен быть article - тизер article, а полный текст article отличается article s, хотя они относятся к одной и той же сущности.

Ответ 2

Это вопрос мнения, так что это зависит от предпочтений. Основываясь на вашем изображении, я бы использовал <ul> <li>, хотя я мог получить тот же результат, используя div.

Ответ 3

Если каждый элемент представляет собой статью, то каждый из них должен быть представлен с помощью <article> элементов.

Если вы считаете, что это упорядоченный или неупорядоченный список статей, вы можете использовать элементы <ol> или <ul> соответственно.

Я бы порекомендовал держать разметку как можно проще и сложнее, если это необходимо, так что что-то вроде:

<div>
  <article>
    <img>
    <div>…</div>
  </article>
  <article>
    <img>
    <div>…</div>
  </article>
  …
</div>

Ответ 4

Как говорили другие люди, я думаю, что каждая статья должна быть помечена тегом article.

Я также предлагаю объединить весь список тегом aside. Итак, если у вас есть одна основная статья на странице (в окружении main), она не будет затронута другими статьями.

Вот хорошая статья о aside.

Ответ 5

Ответы здесь оставляют желать лучшего. В спецификации HTML есть пример разметки поста с комментариями внутри.

https://www.w3.org/TR/2013/CR-html5-20130806/sections.html#the-article-element

Хотя принятый ответ скопировал/вставил описание того, как используется элемент <article> он вообще не отвечает на заданный вопрос.

Вот ответ от W3.ORG

Если вы можете использовать собственный элемент HTML [HTML51] или атрибут с семантикой и поведением, которые вам уже требуются, вместо повторного выбора элемента и добавления роли, состояния или свойства ARIA, чтобы сделать его доступным, то сделайте это.

Вот логика, которой я придерживаюсь после исследования: у меня есть список отзывов. Каждый отзыв упорядочен полезными голосами. Поэтому первый уровень будет упорядоченным списком, так как обзоры будут упорядочены их полезными голосами. В противном случае будет достаточно неупорядоченного списка, такого как вложенные комментарии:

<ol>
    <li class="review" role="article"> <!-- reviews ordered by votes-->
        <header>
            <h2>Review title</h2>
        </header>
        <p>Review body</p>
        <section class="comments">
            <ul>
                <li class="comment" role="article"> <!-- comments with votes-->

                </li>
            </ul>
        </section>
    </li>
</ol>

Проницательный ответ @Terrill Thompson объясняет, что читателям экрана помогает разметка семантического списка. Так что да, списки статей имеют смысл. Когда все становится сложным, он упоминает, насколько это может сбивать с толку. Вот где атрибуты ARIA, role и tabindex должны быть добавлены и протестированы.

В этом ответе есть комментарий, направляющий пользователей к беседе на W3.ORG. По определению кажется, что <article> не будет частью списка, где он должен быть "автономным контентом". Однако вопрос здесь, я и, вероятно, вы читаете это, требуют более глубокого ответа, когда article относится к истинному списку статей.

Такие как:

• Список статей блога с выдержками
• Результаты поиска
• Отзывы
• Комментарии