Чем список лучше div блока?

Question

[Анастасия]

Здравствуйте. Часто в вёрстке вижу, как в меню используют вот такую конструкцию. И не важно: горизонтальное меню или вертикальное.

<ul class="menu">
	<li>Главная</li>
	<li>Новости</li>
	<li>Блог</li>
</ul>

Чем оно лучше вот такой конструкции

<div class="menu">
	<div>Главная</div>
	<div>Новости</div>
	<div>Блог</div>
</div>

или такого, если у тебя всё-таки ссылки, а не кнопки:

<div class="menu">
	<a>Главная</a>
	<a>Новости</a>
	<a>Блок</a>
</div>

Смысл списков в меню, когда можно вот так?

Comments

[origami1024]

Смысл списков в меню, когда можно вот так?

А чем тебе "div" удобнее писать чем "ul" или "li"? Div - больше печатать на клавиатуре нужно при написании кода

[Анастасия]

origami1024, list-style ещё писать нужно.

Answer 1

[WapSter]

Для доступности. Чтобы слепой понимал, что перед ним список из таково-то числа ссылок, а еще лучше запихивать список с навигационными ссылками в тег nav.

Comments

[Анастасия]

Преимущество только для слепых?

[Владимир Коротенко]

Анастасия, не только, поисковики составляют дерево приоритетов, все что попадает в их модель улучшает распознавание документа.

[WapSter]

Анастасия, сейчас в основном да, еще интеграция с различными устройствами типа читалок которые не могут отображать css. Да и вообще просто логически подумай вот есть спецификация над которой работает куча народа из кучи компаний они от делать нефиг придумывают теги? Используя теги по назначению делаешь сайт доступным, лучше оптимизированным для рендеринга, некоторые теги улучшают сайт к SEO. Да самый простой пример. Что-то пошло не так и перестал работать css

<div class="menu">
  <a>Главная</a>
  <a>Новости</a>
  <a>Блок</a>
</div>

эти ссылки просто напросто слипнуться, и будучи зрячим с телефона уже по ним будет труднее попасть. А так твой сайт будет более дружелюбным для пользователя.

[Анастасия]

WapSter, если на моём сайте уйдёт css, то с ним станет вообще невозможно работать, потому что полетят всякие блоки с visibility:hidden. Это конечно камень в мой огород, но я не могу представить такие обстоятельства, когда index.php заводится, а в соседней папке css завестись не может. Если только ты не умственно отсталый и не используешь сторонний сервер, какой-нибудь cloudflare.

над которой работает куча народа из кучи компаний они от делать нефиг придумывают теги?

Ещё куча народу придумывает операционные системы, которые через задний проход работают. Просто кучи народа разные бывают: одни viber делают, другие telegram. В первом случае именно кучи.

Я не против использовать список, когда у меня есть именно список. Тем более, когда был ul > li ещё не было того css, который есть сейчас.

[WapSter]

Анастасия, да пиши как хочешь, вообще пофиг.

[Dima Polos]

Анастасия, сделай проще - возьми тег nav, и в него напиши просто di div div, или a, a, a - то бишь ссылки. Откажись от ul li, но оберни ссылки в nav, если это ссылки по сайту или странице. В принципе в теге nav может быть почти любой контент, хоть список, хоть ссылки, хоть статью туда пиши, важно, что в нем есть ссылки для навигации по всему сайту, и будет ок. Или, бери div, но воспользуйся aria атрибутами, в частности role.

Answer 2

[roswell]

Просто нужно вспомнить о семантической вёрстке.

Answer 3

[Lord_Dantes]

Потому-что для меню существует тэг. И как еще указали выше это способствует на чтение сайта для слепых.

Comments

[Анастасия]

Потому-что для меню существует тэг.

это не ответ. Вы не назвали преимуществ. С div так же работает.

для людей с ограниченными возможностями нужно полностью сайт делать, а не только пункт меню. Поэтому если сайт полностью не подготавливается для инвалидов, то я не вижу никаких аргументов для использования списка.

Тем более я не вижу никаких аргументов в вашем ответе.

[Lord_Dantes]

Анастасия, не видите аргументов в том что люди которые создали HTML создали спец. тэг для меню. Мне больше нечего вам сказать.

[Ярослав Иванов]

s l a v e, Это бот)

[Lord_Dantes]

Ярослав Иванов, как вы узнали это?)

[Ярослав Иванов]

s l a v e,

Answer 4

[Olegarh1a]

div class="menu" и ul class="menu" (div и ul) это блочные элементы. Но они отличаются тег div принято использовать для разметки сайта, Тег ul для списков
так почему все же ul,

для начала нам нужно задать себе вопрос что такое навигация ? - Навигация это список

и часто его нужно сделать маркированым или добавить картинку перед ссылкой. вот как раз тег ul создан для списков (естественно логично использывать данный тег). Допустим вам надо использовать картинку перед ссылкой с тегами div > a будет очень затруднительно и вы потратите драгоценное время, а если использовать ul>li>a это можно сделать всего лишь 1 свойством list-style

Answer 5

[survivor2005]

Делается для читабельности кода и для поисковиков это плюс. Списки более значимые для поисковика нежели див.