Uwe_Boll
@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>

  • Вопрос задан
  • 287 просмотров
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Я бы сделал разметку вот так https://jsfiddle.net/webirus/q8t9o7s7/1/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
bootd
@bootd Куратор тега HTML
Гугли и ты откроешь врата знаний!
3й вариант - лучше. Тег article в html5 для этого и был придуман. Только тогда, обертка materials должна быть не дивом, а тегом section
Ответ написан
dom1n1k
@dom1n1k
Ни один из вариантов не выглядит идеальным, но если выбирать из них - третий, пожалуй, получше.
Манеру оборачивать в ul/li всё, что хоть как-то похоже на список - считаю псевдосемантической шизой.
По-моему, эта мода схлынула уже несколько лет как.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы