Как семантически правильно сверстать список статей или список товаров?

Question

[Uwe_Boll]

что более правильнее:

Так думаю Я

<ul class="materials_list">
	<li class="short_material">
		<h2><a href="#">Some Text</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, libero!</p>
		<a href="#">more</a>
	</li>
	<li class="short_material">
		<h2><a href="#">Some Text</a></h2>
		<p>Tenetur maxime enim optio sequi beatae consectetur, praesentium laboriosam. Voluptate?</p>
		<a href="#">more</a>
	</li>
</ul>

найдено в сети 1

<div class="materials">
	<div class="short_material">
		<h2><a href="#">some Text</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam aliquid incidunt hic iusto perspiciatis vitae perferendis quisquam placeat ea molestias.</p>
		<a href="#">more</a>
	</div>
	<div class="short_material">
		<h2><a href="#">some Text</a></h2>
		<p>Quos rerum aspernatur voluptatem dignissimos, reprehenderit dolore temporibus eveniet vel velit voluptatum beatae modi itaque, praesentium voluptate recusandae sit assumenda.</p>
		<a href="#">more</a>
	</div>
</div>

найдено у преспешника евгешки попова

<div class="materials">
	<article class="short_material">
		<h2><a href="#">some text</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quaerat!</p>
		<a href="#">more</a>
	</article>
	<article class="short_material">
		<h2><a href="#">some text</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, rerum.</p>
		<a href="#">more</a>
	</article>
</div>

Answer 1

[Сергей Горячев]

Я бы сделал разметку вот так https://jsfiddle.net/webirus/q8t9o7s7/1/

Answer 2

[Дима Паутов]

3й вариант - лучше. Тег article в html5 для этого и был придуман. Только тогда, обертка materials должна быть не дивом, а тегом section

Comments

[Сергей Горячев]

Соглашусь. Вариант, который автор ехидно принизил, более корректно смотрится. Это если выбирать. Я бы ни один использовать не стал)

[Uwe_Boll]

Сергей Горячев, так напиши свой

[Сергей Горячев]

Uwe_Boll, на БЭМ можешь не обращать внимание https://jsfiddle.net/webirus/q8t9o7s7/
Суть в том, что список материалов - это по-любому список и лишать его ul li нет особенного смысла.
Но также новость / статья / материал - это по-любому article, учитывая разметку html5.

[Сергей Горячев]

обертка materials должна быть не дивом, а тегом section

Да, в моем случае тоже. https://jsfiddle.net/webirus/q8t9o7s7/1/

[Дима Паутов]

Сергей Горячев, по мне так список там лишний. Но на вкус и цвет. Мне не жалко

[Uwe_Boll]

Дима Турков, Можете обосновать почему список лишний ?

[Сергей delphinpro]

Дима Турков,

Только тогда, обертка materials должна быть не дивом, а тегом section

Не должна. Но может быть.
Если у нас страница состоит только из списка статей, секция не нужна. Если есть еще какой-то полезный контент, тогда страницу можно разбить на секции.
К тому же стоит учесть, что раздел должен иметь заголовок. Если у вашей секции нет заголовка, то и section там не уместен.

[Сергей delphinpro]

Сергей Горячев,

Суть в том, что список материалов - это по-любому список

Спорно. Если это реально список, типа оглавления (или возможно краткие анонсы), тогда ul без всяких article. Если это список статей в виде блога, то ul тут будет скорее перебором.

[Дима Паутов]

Uwe_Boll, а что список делает такого, в чем такая разметка проигрывает?

<section class="articles">
  <article class="articleItem"></article>
  <article class="articleItem"></article>
  <article class="articleItem"></article>
  <article class="articleItem"></article>
</section>

По мне так, просто разбухание разметки без какой либо причины

[Uwe_Boll]

Сергей Горячев, оформи как ответ свой код

[Сергей Горячев]

Сергей, тут отсылка к БЭМ, список формирует отступы, а article для оформления стилей. Ну, вообще, мой ответ не претендует на истину в высшей инстанции, я просто предложил более правильный вариант, относительно того, что опубликовано в вопросе )))

[Сергей delphinpro]

Сергей Горячев, ну я тоже не претендую на истину )

Answer 3

[dom1n1k]

Ни один из вариантов не выглядит идеальным, но если выбирать из них - третий, пожалуй, получше.
Манеру оборачивать в ul/li всё, что хоть как-то похоже на список - считаю псевдосемантической шизой.
По-моему, эта мода схлынула уже несколько лет как.