В HTML5, должна ли основная навигация быть внутри или вне элемента <header>?

В HTML5 я знаю, что <nav> может использоваться как внутри, так и вне элемента masthead <header>. Для веб-сайтов, имеющих как вторичную, так и основную навигацию, кажется, что включить вторичную навигацию в качестве элемента <nav> внутри элемента masthead <header> с основной навигацией в качестве элемента <nav> вне элемента masthead <header>. Однако, если на веб-сайте отсутствует вторичная навигация, обычно представляется основной навигацией в элементе <nav> в элементе masthead <header>.

Если я последую этим примерам, моя структура содержимого будет основана на включении или исключении вторичной навигации. Это вводит связь между содержимым и стилем, который кажется ненужным и неестественным.

Есть ли лучший способ, чтобы я не перемещал основную навигацию изнутри наружу элемента masthead <header> на основе включения или исключения вторичной навигации?

Пример основной и вторичной навигации

<header>
    <nav>
        <!-- Secondary Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
    <h1>Website Title</h1>
</header>
<nav>
    <!-- Main Navigation outside <header> -->
    <ul>
        <li></li>
    </ul>
</nav>

OnlineDegrees.org является примером сайта, который следует за приведенным выше шаблоном.

Основной пример навигации

<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Main Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
</header>

Keyzo.co.uk является примером сайта, который следует за приведенным выше шаблоном.

Выдержки из введения HTML5 - добавлено 02 февраля-11, 7:38

Представляя HTML5 от Брюса Лоусона и Реми Шарпа, это говорит о предмете:

Заголовок также может содержать навигацию. Это может быть очень полезно для навигации по всему сайту, особенно на сайтах с шаблонами, где весь элемент <header> может поступать из файла шаблона.

Конечно, не требуется, чтобы <nav> находился в <header>.

Если во многом зависит от того, считаете ли вы, что навигация по всему сайту относится к заголовку сайта, а также к прагматичным соображениям о простоте стилизации.

Основываясь на этом последнем предложении, кажется, что Брюс Лоусон, автор главы этих выдержек, признает, что "прагматические соображения об упрощении стиля" дают связь между содержанием и стилем.

Ответ 1

Это полностью зависит от вас. Вы можете либо поместить их в заголовок, либо нет, если только элементы внутри них являются только внутренними навигационными элементами (т.е. Не ссылаются на внешние сайты, такие как твиттер или учетная запись facebook), тогда это прекрасно.

Они, как правило, помещаются в заголовок просто потому, что часто перемещаются, но не устанавливаются в камне.

Подробнее об этом можно узнать в HTML5 Doctor.

Ответ 2

Немного неясно, спрашиваете ли вы мнения, например. "это обычное xxx" или фактическое правило, поэтому я буду склоняться в сторону правил.

Примеры, которые вы цитируете, основываются на примерах в спецификации для элемента nav. Помните, что спецификация постоянно меняется, и правила иногда свернуты, поэтому я бы рискнул, что многие люди могут просто делать то, что дано, а не интерпретировать. Вы показываете два отдельных примера с разным поведением, так что только вы можете прочитать его. У любого из этих сайтов также есть противоположная ситуация с sub/nav, и если да, то как они справляются с этим?

Самое главное, однако, в спецификации нет ничего, что можно сделать как the. Одна из целей с HTML5 заключалась в том, чтобы очень ясно [это для сравнения] о семантике, требованиях и т.д., Поэтому упущение стоит отметить. Насколько я вижу, примеры независимы друг от друга и одинаково важны в их контексте требований к компоновке и т.д.

Наличие положения источника источника в качестве условного типа является глупым (другой красный флаг). Просто выберите метод и пойдите с ним.

Ответ 3

@IanDevlin верен. Правила MDN говорят следующее:

"Элемент заголовка HTML" определяет заголовок страницы - обычно содержит логотип и имя сайта и, возможно, горизонтальное меню... "

Слово "возможно" есть ключ. Далее говорится, что заголовок не обязательно должен быть заголовком сайта. Например, вы можете включить "заголовок" во всплывающем модальном модуле или на других модульных частях документа, где есть заголовок, и было бы полезно, чтобы пользователь на экране читателя знал об этом.

В терминах неявного использования NAV вы можете использовать его везде, где есть сгруппированная навигация по сайту, хотя он обычно опускается из раздела "нижний колонтитул" для мини-навигаторов/важных ссылок на сайты.

Действительно, это сводится к личному/командному выбору. Решите, что вы и ваша команда чувствуете, более смысловые и более важные, и старайтесь быть последовательными. Для меня, если nav встроен с логотипом и основным сайтом "h1", тогда имеет смысл помещать его в "заголовок", но если у вас есть другой выбор дизайна, тогда выбирайте индивидуально.

Самое главное проверить документы и быть уверенным, что если вы решите опустить или включить вас, вы поймете, почему вы принимаете это конкретное решение.

Ответ 4

Мне не нравится вставлять навигатор в заголовок. Мое рассуждение:

Логика

Заголовок содержит вводную информацию о документе. Nav - это меню, которое ссылается на другие документы. На мой взгляд, это означает, что содержимое навигатора принадлежит сайту, а не документу. Исключение было бы, если бы NAV удерживал прямые ссылки.

Доступность

Мне нравится помещать меню в конец исходного кода, а не в начало. Я использую CSS, чтобы отправить его на верхнюю часть экрана компьютера или оставить его в конце для текстовых речевых браузеров и небольших экранов. Это позволяет избежать необходимости пропустить ссылки.

Ответ 5

Чтобы расширить то, что сказал @JoshuaMaddox, в области обучения MDN, в разделе "Введение в HTML", Документ и структура сайта гласит (жирный/выделение мной):

Заголовок

Обычно большая полоса в верхней части с большим заголовком и/или логотипом. Здесь основная общая информация о веб-сайте обычно остается от одной веб-страницы до другой.

Панель навигации

Ссылки на основные разделы сайта; обычно представленное меню кнопок, ссылок или вкладок. Как и заголовок, этот контент обычно остается согласованы с одной веб-страницы на другую - с несогласованным Навигация на вашем сайте просто приведет к запутанности, разочарованию пользователи. Многие веб-дизайнеры считают, что панель навигации является частью заголовок, а не отдельный компонент, но это не требование; на самом деле некоторые также утверждают, что наличие двух отдельных лучше для доступности, поскольку считыватели экрана могут читать две функции лучше, если они разделены.