CODEWITHSUNDEEP
htmlnavsemantic-markup
lucian
lucian

Reputation: 681

Can each article element have it's own nav?

I'm thinking of this front page layout where "the main navigation" is spread out all over the page, with the latest article from each category displayed, like this:

<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>

Would that be semantically correct?

Upvotes: 0

Views: 108

Answers (1)

unor
unor

Reputation: 96707

If an article element contains a nav element, this nav represents the navigation for this article. This could be used for an article’s table of contents, or for a pagination in case the article is split into multiple pages.

Your example doesn’t make much sense, and its outline is a mess and not really clear/usable:

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"

If this really is your site’s navigation menu, you should use one nav.

However, there is no obvious solution for adding an excerpt for each navigation item’s last article (it’s a rather uncommon way, I’d guess). These are usually two separate sections, i.e., a nav for the navigation, and a section for the recent articles:

<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>

Assuming that you can’t separate these sections: it would probably not be clear for users that this excerpt only represents one (i.e., the latest) article of that category/section; so you probably add some explanation to this anyway, so maybe using a section for each navigation menu item could work, e.g.:

<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>

Inside each section, you could add the excerpt, e.g., by introducing it with another heading in a section:

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

or just by adding some text:

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

But I would advice against all this (mixing the navigation with the list of newest articles) and go with separate sections (as in my first snippet).

Upvotes: 1

Related Questions