В HTML5, должна ли основная навигация быть внутри или снаружи элемента?
в 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 является примером сайта, который следует приведенному выше шаблону.
Основной Только Пример Навигации
<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>.
Если зависит в основном от того, считаете ли вы, что навигация по всему сайту принадлежит к заголовку всего сайта, а также прагматические соображения о простоте стиля.
5 ответов:
Это полностью зависит от вас. Вы можете либо поместить их в заголовок, либо нет, если элементы внутри них являются только внутренними элементами навигации (т. е. не ссылаются на внешние сайты, такие как учетная запись twitter или facebook), тогда все в порядке.
Они, как правило, помещаются в заголовок просто потому, что там часто идет навигация, но она не установлена в камне.
вы можете прочитать больше об этом в HTML5 доктор.
немного неясно, спрашиваете ли вы мнения, например. "обычно это делается xxx" или фактическое правило, поэтому я собираюсь склониться в сторону правил.
примеры, которые вы цитируете, похоже, основаны на примерах в спецификация для элемента nav. Помните, что спецификация продолжает изменяться, и правила иногда запутаны, поэтому я бы рискнул, что многие люди могут просто делать то, что дано, а не интерпретировать. Ты показываешь два отдельные примеры с различным поведением, так что есть только так много вы можете прочитать в нем. У любого из этих сайтов также есть противоположная ситуация sub / nav, и если да, то как они ее обрабатывают?
самое главное, что в спецификации ничего не говорится, что это the способ сделать это. Одна из целей с HTML5 должна была быть очень понятно[это для сравнения] о семантике, требованиях и т. д. так что упущение стоит отметить. Насколько я вижу, примеры независимые друг от друга и одинаково действительные в своем собственном контексте требований к компоновке и т. д.
иметь исходную позицию навигатора условно-это глупо (еще один красный флаг). Просто выберите метод и идите с ним.
Я не люблю ставить nav на заголовок. Мои рассуждения таковы:
логика
The заголовок содержит вводную информацию о документе. Элемент nav - это меню, которое ссылается на другие документы. На мой взгляд это означает, что контент nav принадлежит сайту, а не документ. Исключение было бы, если бы навигатор удерживался вперед связи.
доступность
Мне нравится помещать меню в конце исходного кода, а не в начале. Я использую CSS, чтобы отправить его в верхнюю часть экрана компьютера или оставить его в конце для текстово-речевых браузеров и небольших экранов. Это позволяет избежать необходимости пропускать ссылки.
@IanDevlin правильно. правила MDN говорят следующее:
"элемент заголовка HTML "" определяет заголовок страницы - обычно содержащий логотип и название сайта и, возможно, горизонтальное меню..."
слово "возможно" здесь ключевое. Далее говорится, что заголовок не обязательно должен быть заголовком сайта. Например, вы можете включить "заголовок" на всплывающем модальном или на других модульных частях документа, где есть заголовок и было бы полезно, чтобы пользователь на экране читателя знал об этом.
IT условия неявного использования NAV вы можете использовать его везде, где есть групповая навигация по сайту, хотя она обычно опущена из раздела "нижний колонтитул" для мини-навигаторов / важных ссылок на сайт.
на самом деле это сводится к личному / командному выбору. Решите, что вы и ваша команда чувствуете себя более семантичными и более важными, и постарайтесь быть последовательными. Для меня, если навигатор встроен в логотип и основной сайт " h1 "тогда имеет смысл поместить его в" заголовок", но если у вас есть другой выбор дизайна, то решите в каждом конкретном случае.
самое главное проверить документы и убедитесь, что если вы решите опустить или включить вы понимаете, почему вы принимаете это конкретное решение.
чтобы расширить то, что сказал @JoshuaMaddox, в области обучения MDN, в разделе "Введение в HTML", структура документа и веб-сайта подраздел говорит (полужирный / выделено мной):
заголовок
обычно большая полоса сверху с большим заголовком и/или логотип. Это где основная общая информация о веб-сайте обычно остается от одной веб-страницы к другой.
панель навигации
ссылки на основные разделы сайта; обычно представлены меню кнопки, ссылки или вкладки. Как и заголовок, этот контент обычно остается согласованный от одной веб-страницы к другой - наличие несогласованного навигация по вашему сайту просто приведет к путанице, разочарованию пользователи. многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельный компонент, но это не требование; на самом деле некоторые также утверждают, что наличие двух отдельных является лучше для доступности, так как программы чтения с экрана могут читать две функции лучше, если они будут разделены.
Comments