Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 10
А вот интересно, что SEO-шники скажут про этот стиль .sr-only?
Поисковые системы не воспримут это как способ переоптимизации страницы?
Google Search Console не ругнётся, что "у вас на странице текст нечитаемый"?
Эти люди запрещают нам ковырять в носу табличную верстку, говорят банальности умные вещи про семантику и это все, и потом — бац: делайте меню через списки facepalm.bmp
И всё семантически абсолютно верно, никаких фейспалмов: меню как текст есть таки список. Список действий / переходов которые может совершить пользователь.
- Перейти на страницу А
- Перейти на страницу А1
- Перейти на страницу А2
- Перейти на страницу Б
- Перейти на страницу Ы
- Перейти на страницу Щ
- Заполнить форму
- Полюбоваться закатом
По такой логике и layout страницы ничто не мешает представлять в виде наложенных друг на друга таблиц разной ширины и длины.
Мне кажется все таки список — это список, а меню — это меню.
Другой вопрос, что соответствующего тэга для меню пока нет, но скоро должен появится. И тогда всех, кто делает меню на списках — будут так же шеймить, как и тех, кто делает верстку на таблицах.
Иначе мы придём к выводу, что такие тэги как section, article и так далее не нужны и все можно сделать на div.
Кроме этого нужно не забывать ещё про Accessibility.
Мне кажется все таки список — это список, а меню — это меню.
Другой вопрос, что соответствующего тэга для меню пока нет, но скоро должен появится. И тогда всех, кто делает меню на списках — будут так же шеймить, как и тех, кто делает верстку на таблицах.
Иначе мы придём к выводу, что такие тэги как section, article и так далее не нужны и все можно сделать на div.
Кроме этого нужно не забывать ещё про Accessibility.
Другой вопрос, что соответствующего тэга для меню пока нет, но скоро должен появится.
Есть все же nav и role=menubar, что с семантической точки зрения снижает остроту вопроса…
>таблиц
Было бы возможно, если бы за таблицей не было закреплено буквальное значение таблицы — таблицы данных. И вёрстка на таблицах притягивает смысл таблицы туда, где его нет совсем. Так что нет, логика «меню есть список» совершенно не та же, что «упорядоченно расположенные на странице материалы есть таблица».
>список — это список, а меню — это меню
Меню прямо и непосредственно по своей сущности есть не что иное, как список ссылок. Меню в ресторане — список блюд на выбор. Да, для меню можно придумать дополнительный тег по аналогии с section и article, чтобы отличать такой список от, скажем, списка ссылок в тексте статьи на рекомендуемые сайты, но формироваться оно всё равно будет так же, как и любой другой список. Так же, как section и article «под капотом» — те же div'ы, можно заменить их в коде на div и вёрстка не «поедет». Но пока тега menu нет. Можно попробовать попросить кого следует (W3C ?) внести такой тег на рассмотрение :-)
Было бы возможно, если бы за таблицей не было закреплено буквальное значение таблицы — таблицы данных. И вёрстка на таблицах притягивает смысл таблицы туда, где его нет совсем. Так что нет, логика «меню есть список» совершенно не та же, что «упорядоченно расположенные на странице материалы есть таблица».
>список — это список, а меню — это меню
Меню прямо и непосредственно по своей сущности есть не что иное, как список ссылок. Меню в ресторане — список блюд на выбор. Да, для меню можно придумать дополнительный тег по аналогии с section и article, чтобы отличать такой список от, скажем, списка ссылок в тексте статьи на рекомендуемые сайты, но формироваться оно всё равно будет так же, как и любой другой список. Так же, как section и article «под капотом» — те же div'ы, можно заменить их в коде на div и вёрстка не «поедет». Но пока тега menu нет. Можно попробовать попросить кого следует (W3C ?) внести такой тег на рассмотрение :-)
Совы, как известно, по природе своей весьма гибки, но все же на глобус их натягивать не рекомендуется. А так-то и какой-нибудь новостной раздел на сайте можно назвать и оформить списком — это же список заголовков новостей, которые может прочесть пользователь.
Спасибо за перевод, дельная статья.
Хорошее руководство для скурпулёзной ручной верстки html в стиле начала 10-х годов, когда мета теги были большими.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
HTMHell — адовая разметка (25 плохих примеров)