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

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

Есть ли лучший способ, чтобы я не перемещал основную навигацию изнутри наружу <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 является примером сайта, который следует вышеупомянутому шаблону.

Пример Main Only Navigation

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

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

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

Представляя HTML5 Брюса Лоусона и Реми Шарпа, можно сказать следующее:

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

Конечно, не обязательно <nav>быть в <header>.

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

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

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

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

Вы можете прочитать больше об этом в HTML5 Doctor .

Немного неясно, спрашиваете ли вы мнения, например. «это обычное дело - ххх» или действительное правило, поэтому я собираюсь опираться на правила.

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

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

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

Я не люблю ставить навигацию в шапке . Я рассуждаю так:

логика

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

доступность

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

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

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

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

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

На самом деле все сводится к личному / командному выбору. Решите, что вы и ваша команда чувствуете более семантическим и более важным, и постарайтесь быть последовательными. Для меня, если навигация встроена в логотип и «h1» основного сайта, то имеет смысл поместить его в «заголовок», но если у вас есть другой выбор дизайна, тогда принимайте решение в каждом конкретном случае.

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

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

заголовок

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

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

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