Почему главное меню сайта верстают с помощью списков?

Question

[sergealmazov]

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

Answer 1

[Vadim Bogomazov]

Кто не дает, сделайте без списков

Answer 2

[Юрий Лобанов]

— Что мы видим в навигационном меню сайта?
— Список пунктов меню.
— Что еще раз?
— Список!
— Что такое список?
— Список — это перечень. Перечень однотипных данных.
— Пункты меню — это перечень однотипных данных?
— Да!
— Правильно — список. Итак, навигационное меню сайта — это список. Ок. Переходим к верстке. Давайте верстать список. Чем мы его будем верстать?
— . . .
— Что, никто? Никто не знает? Да,@sergealmazov, подскажи всем.
— Давайте верстать список параграфом с встроенными тегами логической разметки, в которые вставим ссылки на соответствующие страницы.
— . . . Дети, вы меня убиваете! Давайте снова. Что такое список?

Comments

[sergealmazov]

В навигационном меню сайта мы видим кнопки. А по вашей логике получается, что в списке должны быть также фотографии (если на сайте галерея), статьи и прочее.

+ для слепых неудобно пользоваться меню в списках. @bogomazov_vadim оставил хорошую ссылку на ресурс, где это подробно описано.

Зачем тянуть из прошлого это убеждение, что именно список нужен для меню? Зачем?

[Юрий Лобанов]

@sergealmazov то, что мы видим — не важно. Потому что семантика работает не совсем так. Мы видим строку текста или ряд иконок, но семантически это список пунктов меню. Кнопки — это, простите, совсем другое меню, то, что получило тег menu в html5.
Связь галереи и моей логики я не увидел. Что касается превьюшек — часто так и верстается. Превью статей — да, но никак не статья. Статья — это чаще всего основной элемент страницы. Анонсы, последние новости и так далее — пожалуйста.
Ну и не забываем, что статья, фото, анонсы — это полноценные элементы страницы. Фотографии могут рассматриваться по отдельности, к каждой может быть прилеплен блок с комментариями. Для того и созданы элементы логической разметки, чтобы отделять одну статью от другой, один твит от другого.
Что касается навигации — мы видим абсолютно четкий перечень, объединенный как физически, так и по смыслу в один блок. Организация такого перечня исторически делается списком. И главное, говоря исторически, я подразумеваю не старый html4, а основу языка, то, ради чего этот шабаш затевался, а именно — логическая разметка текста и типографика.
Как верстается содержание в печатном издании? Тоже будете утверждать, что это не список, а набор несвязных элементов разметки? Так тогда вообще зачем использовать теги p, a, em, table. Давайте все верстать при помощи div и span.
На сей день появился новый тег, а именно nav. И именно его стоит использовать для навигации, но это не значит, что в него не надо включать список. Пример прост. Один блок навигации может включать несколько списков навигации, к примеру: навигация по страницам сайта и навигация по странице; или навигация по страницам сайта и быстрые ссылки. Вложенные nav? Для меня структура:
-nav
--nav
--nav
— совершенно не однозначна, имхо.
Список есть список. А так вся Ваша позиция напоминает случай, когда верстальщика так запугали, что верстать таблицами плохо, что он таблицу верстает divaми.

[sergealmazov]

Да нет же. Это как толковать. Не список это. А набор нескольких однотипных элементов.

[Alexander Tartmin]

@iiil Вы пытались =))) @sergealmazov пока не поймете семантику, не делайте людям сайты за деньги, они не оценят тех проблем, которые Вы им принесете своей вёрсткой. Гляньте примеры сайтов начала 90-х, когда вэб только зарождался и обратите как делалось меню (подсказка - списком ссылок). Люди в те страшные времена о web2.0 и мечтать не смели. Не важно горизонтальное у Вас меню или вертикальное, список ссылок в меню останется списком.

[sergealmazov]

@baskerville42 нужно делать так, потому, что все так делают или потому что "семантика" - это не аргумент. Приведите хоть один пример, когда верстка с использованием списков качественно лучше верстки без использования списков. Кроме того, у нас появляются лишние элементы

[Alexander Tartmin]

@sergealmazov да, один чувак так захотел, теперь все страдают и используют эти дурацкие списки. можно сверстать и на img-ах меню и на дивах и на span-ах. Но вам такое меню будет понятно? А если надо сделать два подменю или три? Не запутаетесь в куче вложеных дивов? Тут уже Вам писали что это семантика, это не какое-то слово, а определённый стандарт и против него можно идти, только надеятся что те же поисковики будут правильно индексироват сайт, я бы не стал. Используйте для контента тег nav, меню запихивайте в footer а вместо aside смело юзайте strong - все равно для жирного шрифта еще есть тэг b

[saintech]

@iiil хорошая попытка, но навигационное меню это по определению элемент интерфейса, уж точно не список. Слово "страница" в вебе уже давно устарело.

[Юрий Лобанов]

@CAHTEXHuK пункты меню семантически — список.

[Евгений Петров]

@CAHTEXHuK вот как?)) То есть термин page не используется в спецификации? И что же теперь, позвольте спросить, используется вместо слова страница?

[saintech]

@iiil Если в контексте интерфейсов, то пункты меню, это пункты меню, списки (list) в интерфейсах это немного другое.
@Petroveg

И что же теперь, позвольте спросить, используется вместо слова страница?

Веб-приложение?

вот как?)) То есть термин page не используется в спецификации??

Спецификации спецификациями, но термин "page" морально устарел. Сейчас этот термин используется в основном как элемент интерфейса для разбиения контента с помощью пагинации, да и то это начинает вытесняться infinite scrolling'ом. Ну еще landing page остались, да.

[Евгений Петров]

@CAHTEXHuK вы серьёзно считаете, что термин page не используется в веб-приложении?)
Каким образом загрузка контента на страницу может отменить термин «страница»?
Страница, по-вашему, используется как элемент интерфейса?)))
Вы просто демонстрируете полную невежественность.

Answer 3

[Евгений Петров]

Можно вообще построить сайт исключительно на div и всё будет отлично. Отлично от грамотной семантической разметки.

Comments

[sergealmazov]

А вот здесь подробнее. Почему именно списки? Оставьте ссылку на документ.

[Евгений Петров]

@sergealmazov каких ссылок вы хотите? Чтобы Google или Яндекс написали, что для меню кроме списков не воспринимают ничего?) Так нет — им начихать, сделали вы меню списком или div, div, div.

Нет и не может быть жёсткой рекомендации. Достаточно посмотреть обсуждения. Народ до сих пор обсуждает — можно ли section класть внутрь article или нельзя.

[Sergej]

@Petroveg "можно ли section класть внутрь article или нельзя."
Вот тоже думаю над этим.

[sergealmazov]

Консорциум придумал, а нам решать, что с этим делать...

[Юрий Лобанов]

@Petroveg а все потому, что учить верстку стоит после того, как получается нормально сверстать документ в word. Странная позиция, при определении семантического значения того или иного участка текста опираться на какие-то там правила, которые сами основываются на правилах типографики.

Answer 4

[Константин Андреевич]

Так верстают просто потому, что так принято. Приятно списки верстать списками. И всё, никаких SEO, стандартов и прочего.

Аналогичным вашему вопросу был бы — почему таблицу верстают таблицей.

Comments

[sergealmazov]

Принято? Кем? Где именно есть рекомендация в W3C?

[Константин Андреевич]

@sergealmazov вы либо правда не понимаете, либо тролите. Принятно не в смысле стандарта, а в смысле логики. У мужчин принято здороваться за руку — где рекомендация этому действию?

[Юрий Лобанов]

@reffy рекомендуют, кстати, биться кулаками, типа чтобы микробы не разносить )

[Константин Андреевич]

@iiil руки надо мыть, чтобы микробов не разносить ))

[Юрий Лобанов]

@reffy да это понятно ) но я серьезно, недавно статью читал, где кто-то там исследовал, что можно сильно сократить распространение эпидемий если банально отказаться от рукопожатий.
amurburg.ru/news/Za_gorizontom/infektsionisty_priz...

[Константин Андреевич]

@iiil ну всё, будем кланяться теперь друг друг и реверансы исполнять (:

Answer 5

[Алексей]

Потому что сайт делается не только для верстальщиков и пользователей, но и для поисковиков и браузеров. А для них семантическая разметка - как скелет - без него ни куда.

www.w3school.ru/blog/xhtml/explaining-semantic-mar...

Comments

[sergealmazov]

Где именно в статье говорится про главное меню? Нужны тогда ссылки на страницы рекомендаций поисковиков. Пока что нет убедительного доказательства, почему именно списки. Потому, что все так делают - не вариант.

Answer 6

[Руслан Бегалиев]

@sergealmazov , такое определение вас устроит? Это перевод официальной документации W3C. Там нет перечня конкретных тегов, но зато есть четкое определение правильной и логичной структуры навигации.