The navigation is one of the most import element of any web site. It can be positioned horizontally below your web site main header then duplicated on the page footer or maybe you decided to have a sidebar (left or right) to display you site navigation instead. The same HTML can be used in either case and CSS will take care of your specific choice of orientation. Here is the HTML of a typical navigation bar using HTML5 semantics:
<nav>
<ul>
<li id=”home”><a href=”http://your-domain-name”>Home</a></li>
<li id=”services”><a href=”/services.html”>Services</a>
<ul>
<li><a href=”/services/hardware.html”>Hardware</a></li>
<li><a href=/services/software.html”>Software Configuration</a><li>
<li><a href=”/services/network.html”>LAN Setup</a></li>
</ul>
</li>
<li id=”products”><a href=”/products.html”>Products<a/>
<ul>
<li><a href=”/products/lcds.html”>LCD Monitors</a><li>
<li><a href=”/products/connectors.html”>Connectors</a></li>
<li><a href=”/products/rams.html”>RAMs</a></li>
</ul>
</li>
<li id=”contact”><a href=”/contact.html”>Contact Us</a></li>
<li id=”testimonials”><a href=”/testimonials.html”>Testimonials</a><li>
<li id=”about”><a href=”/about.html”>About</a></li>
</ul>
</nav>
1) Notice how the <nav>…</nav> wraps the entire navigation. It can not only serve as a navigation container but can be used to both position your navigation in your web page but also contain visual elements such as a background-color and background-image css styles. Because you might have more than one <nav>…</nav> element in a given web page, you can assign each one a CSS ID that will allow you to write a CSS style targeting that specific element.
In this instance, we could have <nav id=”topnav”>….</nav> for a horizontal navigation placed on top of your web pages, above or below your main header/banner. For a vertical navigation, having <nav id=”leftnav”>…</nav> or <nav id=”rightnav”>…</nav> makes more sense if your your main navigation is placed in the left/right sidebar.
2) Notice how the top-level <li>..</li>HTML tags are each assigned a unique CSS ID (e.g. <li id=”home”>…</li>). Those CSS IDs allow you to target each main navigation section and define properties such as the width, single out its sub-menu and also pick which main section of the navigation should be highlighted as a visual aid (i.e. current page link).
3) Also pay attention to how sub-menus (italicized grey text) are defined under the “services” and “products” sections of this navigation. There is really no need to specify a CSS ID for the sub-menus. If for instance, you need to define a CSS style for a sub-menu in the “products” section, simply use the “li#products ul” selector.
So that’s it for the HTML aspect of your site main navigation. It’s simple, clean and can easily be adapted for mobile devices.
On Part 2, we’ll explore the CSS needed to position and define the look-and-feel of a vertical navigation placed on your web site’s sidebar. We’ll even include some CSS tips to make it work in IE6.
In Part 3, we’ll do the same for the horizontal navigation.
Then finally in Part 4, we’ll compared those 2 navigation orientations then look at the big picture to figure out the best location of your web site main navigation in your web pages HTML markup. Yes, that position matters as far as SEO is concerned. So stick around to get those gold nuggets.
