В типичном индексе статей (например, в блоге без отрывка), как этот образ:
эти элементы должны быть списком (<ul><li>) или просто divs?
А также, они должны быть фигурой /figcaption? Потому что это будет иметь смысл, но и... картинка является частью artcile не основного контента, поэтому, возможно, название/описание не является заголовком изображения, а заголовком статьи.
как вы думаете?
EDIT: живой пример - https://news.google.com/?hl=en
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, хотя они относятся к одной и той же сущности.
Это вопрос мнения, так что это зависит от предпочтений.
Основываясь на вашем изображении, я бы использовал <ul> <li>, хотя я мог получить тот же результат, используя div.
Если каждый элемент представляет собой статью, то каждый из них должен быть представлен с помощью <article> элементов.
Если вы считаете, что это упорядоченный или неупорядоченный список статей, вы можете использовать элементы <ol> или <ul> соответственно.
Я бы порекомендовал держать разметку как можно проще и сложнее, если это необходимо, так что что-то вроде:
<div>
<article>
<img>
<div>…</div>
</article>
<article>
<img>
<div>…</div>
</article>
…
</div>
Как говорили другие люди, я думаю, что каждая статья должна быть помечена тегом article.
Я также предлагаю объединить весь список тегом aside. Итак, если у вас есть одна основная статья на странице (в окружении main), она не будет затронута другими статьями.
Вот хорошая статья о aside.
Ответы здесь оставляют желать лучшего. В спецификации 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 относится к истинному списку статей.
Такие как: