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:

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


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

<nav id="menu-principal" role="navigation">

notices/html-css/structurer-les-menus-de-navigation-avec-des-listes.txt · Last modified: 30 December 2013 at 17:32 by Sébastien Delorme (Atalan)

Project coordinated by Atalan.

In partnership with: