Может ли каждый элемент статьи иметь собственную навигацию?

Я думаю об этом макете главной страницы, где «основная навигация» разбросана по всей странице с отображением последней статьи из каждой категории, например:

<article>
    <nav><a href="/elephants">Elephants</a></nav>
    <h2><a href="/elephants/borneo.htm">The Borneo Elephant</a></h2>
<p>...</p>
</article>
<article>
    <nav><a href="/hippos">Hippos</a></nav>
    <h2><a href="/hippos/malgasy.htm">The Malgasy Hippo</a></h2>
<p>...</p>
</article>
<article>
    <nav><a href="/rhinos">Rhinos</a></nav>
    <h2><a href="/rhinos/white.htm">The White Rhino</a></h2>
<p>...</p>
</article>

Будет ли это семантически правильным?


person Lucian Davidescu    schedule 29.05.2015    source источник
comment
Содержание статьи должно быть внутри тега <article>... Похоже, вы используете тег, чтобы указать, что ссылка является гиперссылкой на статью, которая, ИМХО, семантически неверна. Либо у вас есть статья, либо у вас есть навигационное пособие. Нет ничего плохого в том, что каждая статья имеет свое собственное средство навигации (я полагаю, для навигации по статье), но текущий формат просто кажется неправильным (без дополнительных объяснений ваших рассуждений).   -  person blurfus    schedule 30.05.2015
comment
На самом деле это выдержки (код обновлен для ясности), и в нем говорится здесь и в других местах можно использовать ‹article› для выдержек. Иначе статьи на первой полосе все равно бы не было... Меня это не смущает, но я не знаю, что использовать.   -  person Lucian Davidescu    schedule 30.05.2015


Ответы (1)


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

Ваш пример не имеет особого смысла, а его схема беспорядочна и не очень понятна/пригодна для использования:

1. implied heading from <article>
  1.1 implied heading from <nav>
2 "The Borneo Elephant"
3. implied heading from <article>
  3.1 implied heading from <nav>
4. "The Malgasy Hippo"
5. implied heading from <article>
  5.1 implied heading from <nav>
6. "The White Rhino"

Если это действительно меню навигации вашего сайта, используйте один nav.

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

<nav>
  <!-- <h1>Navigation</h1> -->
  <ul>
    <li><a href="/elephants">Elephants</a></li>
    <li><a href="/hippos">Hippos</a></li>
    <li><a href="/rhinos">Rhinos</a></li>
  </ul>
</nav>

<section>
  <h1>Recent articles</h1>

  <article>
    <header>Category: <a href="/elephants">Elephants</a></header>
  </article>

  <article>
    <header>Category: <a href="/hippos">Hippos</a></header>
  </article>

  <article>
    <header>Category: <a href="/rhinos">Rhinos</a></header>
  </article>

</section>

Предполагая, что вы не можете разделить эти разделы: для пользователей, вероятно, не будет ясно, что этот отрывок представляет только одну (то есть самую последнюю) статью этой категории/раздела; так что вы, вероятно, все равно добавите какое-то объяснение этому, поэтому, возможно, использование раздела для каждого элемента меню навигации может работать, например:

<nav>
  <h1>Navigation</h1>

  <section>
    <h2><a href="/elephants">Elephants</a></h2>
  </section>

  <section>
    <h2><a href="/hippos">Hippos</a></h2>
  </section>

  <section>
    <h2><a href="/rhinos">Rhinos</a></h2>
  </section>

</nav>

Внутри каждого section вы можете добавить отрывок, например, введя его с другим заголовком в section:

  <section>
    <h2><a href="/elephants">Elephants</a></h2>
    <section>
      <h3>Newest "Elephants" article</h3>
      <article>
        <!-- excerpt -->
      </article>
    </section>
  </section>

или просто добавив текст:

  <section>
    <h2><a href="/elephants">Elephants</a></h2>
    <p>Newest "Elephants" article:</p>
    <article>
      <!-- excerpt -->
    </article>
  </section>

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

person unor    schedule 30.05.2015
comment
На самом деле это не так уж и редкость, многие газеты и журналы организованы таким образом (хотя не слишком интенсивно для html5, большинство просто использует div повсюду). В разделе может быть даже более одной статьи, например, последние 3 или 5 или что-то в этом роде. А нав служил бы какой-то мини-хлебной крошкой (или полноценной, где места достаточно). Но я понимаю, что схема запуталась, создавая множество разделов для всех маленьких кусочков таксономии, и что менее навязчивый элемент мог бы послужить лучше. - person Lucian Davidescu; 30.05.2015
comment
@LucianDavidescu: Вы знаете пример такого сайта? Я не уверен, что понимаю часть мини-хлебных крошек. Я бы предположил, что такие списки последних статей не отражают (основную) навигацию по сайту. - person unor; 31.05.2015
comment
На самом деле, у большинства есть и основная навигация, но я вообще не хочу ее использовать. Я говорю о том, чтобы показывать только последние материалы из каждой категории, например здесь: newyorker.com - person Lucian Davidescu; 31.05.2015
comment
@LucianDavidescu: Понятно. Я считаю, что это часть метаданных статьи (например, теги сообщения в блоге), поэтому я бы пометил его, как в первом примере в моем ответе: article со ссылкой на категорию в header; не используя nav. (Как и на сайте newyorker.com, для этого используется свойство Schema.org articleSection, если вы хотите использовать Schema.org.) - person unor; 31.05.2015