Can HTML5 figure elements be used inside nav tag?

Question

I'm looking to update a very old HTML page to make use of HTML5 semantic elements. The page contains 30 images which each contain a caption. The image / caption blocks then link off to other pages.

Currently the markup is:

<div id="wrapper">
   <div class="item">
      <a>
         <img/>
         <p></p>
      </a>
   </div>
   <div class="item">
      <a>
         <img/>
         <p></p>
      </a>
   </div>
   <div class="item">
      <a>
         <img/>
         <p></p>
      </a>
   </div>
</div>

This can be though of as an identification page where you select the item which looks most like what you are interested in and it takes you to more details.

I'm struggling to identify how this would look using HTML5 elements. I think it could be argued this content is actually a navigation block even though it is the main thing on the page?

In which case, how does this look?

<nav>
    <a>
       <figure>
           <img/>
           <figcaption></figcaption>
       </figure>
    </a>
    <a>
       <figure>
           <img/>
           <figcaption></figcaption>
       </figure>
    </a>
    <a>
       <figure>
           <img/>
           <figcaption></figcaption>
       </figure>
    </a>
</nav>

This the main content on the page which currently ranks very well so I'm keen not to make any changes which damage this.

Answer 1

Yes, they can. But this specific use-case seems like a misuse of the <nav> element, which is normally reserved for site-wide navigation and/or intra-page navigation. Not every list of links should be marked up with a <nav> .

"It's not necessary for all links to be contained in a <nav> element. <nav> is intended only for major block of navigation links..."

— Mozilla HTML ELement Reference: Nav Element

Similarly, not every image should be marked up with a <figure> element. The usage notes state:

"Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow"

— Mozilla HTML Element Reference: Figure Element

It's important to remember that nearly all HTML elements have semantic meaning, including most of the elements that existed before HTML5. Sometimes the most semantic way to mark up content doesn't use any of the newer elements.

In the context you describe, where the main body of the page is a list of images with text that link to other pages, it may be most semantic to use a simple list of links with text and images:

<ul class="list">
  <li class="list-item">
    <a href="#">
      <span>Item 1 Name</span>
      <img src="#" alt="item 1 image description">
    </a>
  </li>
  <li class="list-item">
    <a href="#">
      <span>Item 2 Name</span>
      <img src="#" alt="item 2 image description">
    </a>
  </li>
  <li class="list-item">
    <a href="#">
      <span>Item 3 Name</span>
      <img src="#" alt="item 3 image description">
    </a>
  </li>
</ul>