Вопросы по верстке

348

22 января 2017, 13:52

Как правильно сделать меню и почему?
Вариант 1 | Вавриант 2

<nav> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </nav>

<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?
Является ошибкой наличие семантических блоков без применения к ним каких-либо стилей. Или это оправдывается семантически правильной разметкой?

Answer 1

Допустимы оба варианта.
Можно.
Не является, но и не оправдывается.

Все на самом деле просто, главное правило - все должно быть логично. header в заголовке, footer в подвале, nav для навигации, ul/ol - для списков и так далее. Хотите стилизовать или еще как-то использовать элемент - присваивайте id и/или класс. Удачи в работе.

Answer 2

Важно понимать что дизайн блоков определяется CSS, то есть внешний вид блоков никоим образом не может нарушить семантику и валидацию HTML.

Это ответ на 2 и 3 вопросы.

По поводу 1 вопроса, если у вас возникают сомнения в валидности вашего кода вы всегда можете обратиться к W3C HTML валидатору и W3C CSS валидатору

Answer 3

В html нет четкого понятия правильно/неправильно, есть "рекомендации" W3C и некие "стандарты", но каждый разработчик браузера, сам решает, как интерпретировать эти рекомендации, поэтому есть множество исключений.

Согласно рекомендации правильно использовать 2 вариант, это семантично.

Теги <header>, <footer>, <nav>, <main> и пр. по большей части являются блочными элементами, никто не мешает вам работать с ними также как с <div> Поэтому да можно и так <header id="header" class="header"> или как вам более угодно