2

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

  1. Возьмем за основу простое меню, для чего здесь нужны 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>

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

1 ответ 1

5

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

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

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

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

2
  • Полезная информация(+)
    – Arthur
    24 апр 2018 в 18:14
  • @Arhad согласен с Артуром, что полезная информация, но ведь кто-то минуснул. Ставлю плюс для компенсации (+) 25 апр 2018 в 15:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.