Вложенность HTML5 nav и других семантических элементов

При использовании элемента <nav> в HTML, как вы должны обрабатывать элементы навигации, которые содержат ссылки, а также другой контент (такой как логотип в примере ниже)?

Я обнаружил, что все содержится в <nav> Элемент:

<nav>      
  <div class="logo"></div>
  <div class="links">
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
  </div>
</nav>

Но я должен только обернуть фактические элементы навигации в <nav>? (Ссылки в данном случае)

<div class="nav">      
  <div class="logo"></div>
  <nav>
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
  </nav>
</div>

То же самое можно применить к некоторым другим тегам, таким как <time>, если они содержат дополнительные данные:

<div class="time">
  Article posted: <time>2016-09-16</time>
</div>

против

<time>
  Article posted: <span>2016-09-16</span>
</time>

Я говорю не о читабельности кода, а об оптимизации структуры разметки для удобства сканеров (SEO) и доступности.

Редактировать: логотип является лишь примером. Зачастую там гораздо больше контента, я просто использовал логотип в качестве примера для краткости.

4 голоса | спросил Luke 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 16 Sep 2016 04:48:42 +0300 2016, 04:48:42

4 ответа


0

HTML-элемент должен содержать только содержимое, соответствующее определению элемента (или релевантное для цели элемента).

nav element предназначен для «ссылок на другие страницы или на части внутри страницы», поэтому логотип не должен быть включен, если только это не ссылка на главную страницу, или если это необходимо для контекста (см., например, последний пример в спецификации HTML5, который показывает, что nav также может содержать текст, который служит контекстом для ссылок).

Если логотип (или любой другой контент) был «тангенциально связан» с контентом в nav, Вы можете использовать элемент aside.

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

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

ответил unor 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 16 Sep 2016 19:48:33 +0300 2016, 19:48:33
0

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

Правильное использование семантического html очень важно для машинных технологий, которые читают ваш код. Это относится к программам чтения с экрана, поисковым роботам и даже браузерам. Как уже упоминал кто-то, элемент времени предназначен для включения контента в машиночитаемом формате - таким образом, он может быть добавлен в календарь пользователя простым щелчком мыши (в некоторых устройствах /браузерах), а также объявлен как время элемент для чтения с экрана и другие технологии, которые могут использовать его. Размещение контента без даты /времени в этом блоке запрещает эту функцию. В других примерах нарушение семантических рекомендаций приведет к тому, что ваше приложение станет менее доступным и /или менее оптимизированным для SEO.

Это критерии успеха, охватываемые WCAG (Правилами доступности веб-контента): WCAG - Использование семантических элементов для разметки структуры

ответил Skerrvy 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 16 Sep 2016 21:24:15 +0300 2016, 21:24:15
0

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

Чтобы предоставить вам реальный пример того, где такой подход может вызвать некоторые проблемы, некоторые веб-сайты предоставляют пользователям, которые не могут использовать мышь, возможность переходить непосредственно к некоторым разделам веб-страницы с помощью клавиши табуляции, благодаря " Пропустить навигацию "Ссылки, скрытые в самом верху страницы, http://webaim.org/techniques/skipnav/. В этом сценарии пользователь должен сразу перейти к элементам меню, однако, если есть дополнительная разметка, прежде чем он может застрять, перелистывая все эти другие элементы перед переходом по ссылкам.

Надеюсь, это поможет

ответил ynter 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 16 Sep 2016 08:28:56 +0300 2016, 08:28:56
0

Оболочка <nav> предназначена для обозначения основных блоков навигационных ссылок. Он примет любой тег, который попадает в категорию «содержимое потока».

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

ответил CB Weinermoate 16 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 16 Sep 2016 06:44:33 +0300 2016, 06:44:33

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132