Смысл верстки через списки ul > li (html / css)?

235

26 апреля 2018, 07:10

Интересует несколько вопросов по теме "почему и когда использовать списки"?

Возьмем за основу простое меню, для чего здесь нужны li список, если можно обойтись div > a, получается структура на 1 уровень менее вложенная. Может здесь есть какой-то более глубокий смысл?

<ul class="nav"> 
<li class="nav__item item"> 
<a class="item__link">Пункт меню</a> 
</li> 
<li class="nav__item item"> 
<a class="item__link">Пункт меню</a> 
</li> 
<li class="nav__item item"> 
<a class="item__link">Пункт меню</a> 
</li> 
</ul>

<div class="nav"> 
<a class="nav__item">Пункт меню</a> 
<a class="nav__item">Пункт меню</a> 
<a class="nav__item">Пункт меню</a> 
</div>

Допустим, что списки использовать нужно и для этого нашли разумный довод, тогда следующий вопрос. Например есть шапка из 3х блоков: логотип, блок с контактами 1, блок с контактами 2. Здесь тоже использовать ul.header > li.logo, li.contacts-1, li.contacts-2? Разве не будет разумно использовать div.header (или просто header) > div.logo, div.contacts-1, div.contacts-2?

Answer 1

для чего здесь нужны li список, если можно обойтись div > a, получается структура на 1 уровень менее вложенная.

Во-первых, поисковые системы поймут, что это не простой текст, и в поисковой выдаче не будет мешанины вроде текст до меню Пункт менюПункт менюПункт меню текст после меню.

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

В-третьих, ваше меню будет адекватно отображаться даже при сбое в загрузке CSS-стилей, либо полном отсутствии их поддержки (текстовые браузеры по типу lynx достаточно популярны до сих пор).

Answer 2

1) Если подходит список то лучше использовать именно его. Это облегчит понимание кода в будущем и позволит явно выделить набор однотипных элементов.

Именно однотипных.

2) Поэтому в список оборачивать весь Header не стоит. Лучше создать 2 списка для contacts-1 и для contacts-2:

div.header > div.logo
div.header > ul.contacts-1
div.header > ul.contacts-2

Так же не стоит оборачивать в список большой объем верстки. Списки должны быть небольшими и информативными. Список - меню, список - пользователи, список - ссылки в footer-е.

Для таких однотипных элементов как "посты" или "секции боковой панели" лучше использовать div-ы.

Очень важный аспект - соблюдать отступы вложенности. С ним никакие списки не страшны.