A A A A A

Navigation Bar Example

HTML Markup Details

ul element and other container elements
The ul element is the preferred navigation bar container element.
Other container elements that are identified as navigation bars include nested table elements that contain mostly links and map elements that contain area elements. These containers are not as accessible or interoperable as ul element.
li and a elements
The li element should be used as the container for individual a elements in ul element navigation bar.
h2-h6 elements
Heading elements (h2-h6) should provide descriptive labels for a collection of links for page and site navigation; the h2 element is preferred for most navigation bars.
The heading should immediately precede the navigation bar container element.
Heading elements can be hidden in a graphical rendering by using CSS absolute positioning.

Vertical Menu Example Code

W3C Resources

Style Sheet Source Code

div.vmenu h2 {
   position: absolute;
   top: -20em;
   left: -200em;
}

div.vmenu {
   margin: 0;
   padding: 0;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 5em;
   padding: .25em;
   border: solid 2px #4d8cba;
   background: #aa8;
   width: 40%;
}

div.vmenu ul {
  list-style: none;
   margin: 0;
   padding: 0;
   padding: .25m;
}

div.vmenu ul li {
   margin: 0;
   padding: 0;
   list-style: none;
}

div.vmenu ul a {
   margin: 0;
   padding: 0;
   padding-left: .5em;
   padding-right: .5em;
   padding-top: .25em;
   padding-bottom: .25em;
   text-decoration: none;
   background: #eec;
   border: solid 2px #4d8cba;
   font-weight: bold;
   font-size: medium;
   display: block;
}

div.vmenu ul a:link, div.vmenu ul a:visited {


} div.vmenu ul a:hover, div.vmenu ul a:focus {
   background: #4d8cba;
   color: #ffffff;
   border: solid 2px #eec;
}

HTML Source Code

<div class="vmenu">

  <h2>W3C Resources </h2>

  <ul role="navigation" >
    <li><a >W3C Activities</a></li>
    <li><a href="http://www.w3.org/TR/">W3C Technical Reports</a></li>
    <li><a href="http://www.w3.org/Consortium/siteindex">W3C Site Index</a></li>
    <li><a href="http://www.w3.org/Consortium/new-to-w3c">New Visitors</a></li>
    <li><a href="http://www.w3.org/Consortium/" >About W3C</a></li>
    <li><a href="http://www.w3.org/Consortium/join" >Join W3C</a></li>
    <li><a href="http://www.w3.org/Consortium/contact" >Contact W3C</a></li>
  </ul>  

</div>

Horizontal Manu Example Code

W3C Resources

Style Sheet Source Code

div.hmenu h2 {
   position: absolute;
   top: -20em;
   left: -200em;
}

div.hmenu {
   margin: 0;
   padding: .25em;
   margin-top: 1em;
   margin-bottom: 1em;
   background: #eec;
   width: 98%;
   text-align: center;
}

div.hmenu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   padding: .5em;
}

div.hmenu ul li {
   margin: 0;
   padding: 0;
   display: inline;
}

div.hmenu ul a {
   margin: 0;
   padding: 0;
   padding-left: .5em;
   padding-right: .5em;
   text-decoration: none;
   background: #eec;
   border-left: solid 2px #4d8cba;
   font-weight: bold;
   font-size: medium;
}

div.hmenu ul a.first {
   border-left: none;
}

div.hmenu ul a:link, div.hmenu ul a:visited {
   color: #225;
}

div.hmenu ul a:hover, div.hmenu ul a:focus {
   color: #b70;
}

HTML Source Code

<div class="hmenu">

  <h2>W3C Resources </h2>

  <ul role="navigation">
    <li><a >W3C Activities</a></li>
    <li><a href="http://www.w3.org/TR/">W3C Technical Reports</a></li>
    <li><a href="http://www.w3.org/Consortium/siteindex">W3C Site Index</a></li>
    <li><a href="http://www.w3.org/Consortium/new-to-w3c">New Visitors</a></li>
    <li><a href="http://www.w3.org/Consortium/" >About W3C</a></li>
    <li><a href="http://www.w3.org/Consortium/join" >Join W3C</a></li>
    <li><a href="http://www.w3.org/Consortium/contact" >Contact W3C</a></li>
  </ul>  

</div>

Navigation

Other HTML Best Practices

Working Group