====== 1.1.3. Structure navigation menus with lists ======

Use unordered lists ''<ul>'' and ''<li>'' to tag the navigation menus.

If a menu has several levels, make sure the lists are nested properly:

<code html>
<ul id="menu-principal" role="navigation">
    <li><a href="page-1.html">First menu item</a></li>
    <li>
        <a href="page-2.html">Second menu item</a>
        <ul>
            <li><a href="page-3.html">First sub-menu item</a></li>
            <li><a href="page-4.html">Second sub-menu item</a></li>
        </ul>
    </li>
    <li><a href="page-5.html">Third menu item</a></li>
</ul>

</code>

<note html5>**HTML5**

In HTML5, you should also wrap the //main// navigation menus in a ''<nav>'' tag, so that you have: 

<code html>
<nav id="menu-principal" role="navigation">
    <ul>
       […]
    </ul>
</nav>

</code>
</note>

===== Related recommendations =====

<note bulle>
  * Previous recommendation: [[notices:html-css:mettre-en-place-une-hierarchie-de-titres-logique-et-exhaustive-avec-les-balises-h1-a-h6]]
  * Next recommendation: [[notices:html-css:ecrire-le-code-de-la-page-en-suivant-la-logique-de-l-ordre-de-lecture]]
</note>