How to correctly markup sub-navigation with HTML5 / Aria?

Question

I have some HTML which essentially looks like the following:

<section>
    <h1>Release Notes for 1.0</h1>

    <aside class="versions">
        <h1>Other Versions</h1>
        <ul>
            <li><a href="?ver=3.0">3.0</a></li>
            <li><a href="?ver=2.0">2.0</a></li>
            <li class="active">1.0</li>
        </ul>
    </aside>

    <p>Information...</p>
</section>

I may be mistaken, but it doesn't seem appropriate to use the <nav> element for this. It also doesn't seem appropriate to use role="contentinfo".

What is the proper way to markup the list of versions to avoid incorrectly being associated with the section currently headed "Release Notes for 1.0"?

Answer 1

I think the following structure would be more appropriate if it really is the (sub)menu to navigate the different release notes:

<div> <!-- maybe use 'section' instead; depends on whole page structure -->
  <nav>
    <h1>All release notes</h1>
    <ul><!-- … --></ul>
  </nav>
  <article> <!-- instead of 'section' -->
    <h1>Release Notes for 1.0</h1>
    <p><!-- … --></p>
  </article>
</div>

Your example seems to be appropriate when the links are meant like "You might also be interested in …", but don’t serve as the primary method to navigate to other release notes documents. But in this case, I wouldn’t include the current document in this list (as you did with <li class="active">1.0</li>).