Flexible navigation example

The HTML

The HTML for the navigation is a list of links, as that also works on user agents without CSS and is the proper semantic markup (a list is a list, no buts about it):


<ul id="nav">
  <li><a href="index.html">Start / Images</a></li>
  <li><a href="step1.html">The HTML</a></li>
  <li><a href="step2.html">The CSS</a></li>
  <li><a href="step3.html">The JavaScript</a></li>
  <li><a href="step4.html">That's all</a></li>
</ul>

To highlight the current page we add a class called "cur" to the list item we want to highlight:


<ul id="nav">
  <li><a href="index.html">Start / Images</a></li>
  <li class="cur"><a href="step1.html">The HTML</a></li>
  <li><a href="step2.html">The CSS</a></li>
  <li><a href="step3.html">The JavaScript</a></li>
  <li><a href="step4.html">That's all</a></li>
</ul>

However, as the current page should never link to itself, and user agents without CSS should also show an indicator which page is the one you are on, we replace the link with a strong.


<ul id="nav">
  <li><a href="index.html">Start / Images</a></li>
  <li class="cur"><strong>The HTML</strong></li>
  <li><a href="step2.html">The CSS</a></li>
  <li><a href="step3.html">The JavaScript</a></li>
  <li><a href="step4.html">That's all</a></li>
</ul>

Previous: The Images | Next: The CSS