Как правильно сделать меню и почему?
Вариант 1<nav> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </nav>
или Вавриант 2
<nav> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav>
Можно ли к семантическим блокам, использующимся для построения «структуры документа» (н-р:
header
,main
,section
и др.) применять классы отвечающие за построение сетки (н-р:row
,col
,wrapper
и т.п.)? Или для сетки лучше использоватьdiv
?Является ли ошибкой наличие семантических блоков без применения к ним каких-либо стилей. Или это оправдывается семантически правильной разметкой?
-
2Разделили бы лучше свой вопрос на несколько. Спасибо.– Саша ЧерныхCommented 20 янв. 2017 в 11:11
3 ответа
- Допустимы оба варианта.
- Можно.
- Не является, но и не оправдывается.
Все на самом деле просто, главное правило - все должно быть логично. header в заголовке, footer в подвале, nav для навигации, ul/ol - для списков и так далее. Хотите стилизовать или еще как-то использовать элемент - присваивайте id и/или класс. Удачи в работе.
Важно понимать что дизайн блоков определяется CSS, то есть внешний вид блоков никоим образом не может нарушить семантику и валидацию HTML.
Это ответ на 2 и 3 вопросы.
По поводу 1 вопроса, если у вас возникают сомнения в валидности вашего кода вы всегда можете обратиться к W3C HTML валидатору и W3C CSS валидатору
В html нет четкого понятия правильно/неправильно, есть "рекомендации" W3C и некие "стандарты", но каждый разработчик браузера, сам решает, как интерпретировать эти рекомендации, поэтому есть множество исключений.
Согласно рекомендации правильно использовать 2 вариант, это семантично.
Теги <header>
, <footer>
, <nav>
, <main>
и пр. по большей части являются блочными элементами, никто не мешает вам работать с ними также как с <div>
Поэтому да можно и так <header id="header" class="header">
или как вам более угодно
-
1Есть четкие стандарты. Вроде не вложенности элементов (например form в form). Не валидную разметку гугл например может исключить из поисковой выдачи. А отображение в браузерах может быть не верным. Commented 20 янв. 2017 в 12:23
-
Да какие же они четкие? И причем тут гугл и его поисковая выдача? =) Commented 20 янв. 2017 в 12:25
-
Вы считаете допустимым нарушать рекомендации W3C и нарушать валидность разметки? Для каждого тега есть семантические стандарты нарушение которых вызовет не верное отображение например e-mail писем Commented 20 янв. 2017 в 12:29
-
))) Да причем тут это? сами пишите "рекомендации" и называете их "четкими" стандартами, что за замена понятий. Тут вообще человек задал вопрос касаемо технической составляющей. А следовать или не следовать "рекомендациям" каждый волен решать сам. Ведь все зависит от задачи. Если у нас промо-сайт, который должен быть в топе поиска, то это одна реализация, а если у нас закрытая CRM для внутреннего использования в предприятии, и требуется, чтобы даже у Тёти Зины в 6 эксплорере открывалось, то тут даже табличной версткой можно не брезговать. Commented 20 янв. 2017 в 12:35
-
1но чем более серьезно новички будут воспринимать рекомендации, тем чище, читабельные и поддерживаемее будет веб в будущем. Нам уже хватило горе PHP "специалистов", не несите это в разметку. Commented 20 янв. 2017 в 14:28