1
  1. Как правильно сделать меню и почему?
    Вариант 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>
    
  2. Можно ли к семантическим блокам, использующимся для построения «структуры документа» (н-р: header, main, section и др.) применять классы отвечающие за построение сетки (н-р: row, col, wrapper и т.п.)? Или для сетки лучше использовать div?

  3. Является ли ошибкой наличие семантических блоков без применения к ним каких-либо стилей. Или это оправдывается семантически правильной разметкой?

1

3 ответа 3

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

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

1

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

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

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

0

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

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

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

12
  • 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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.