Is it appropriate to wrap each navigation element in a div?

Question

I learn HTML + CSS and work on a website where I need to have a vertical navigation bar on the left side that will have four elements that you can interact with. Is standard practice wrapping each of these four div elements or is there a more elegant or semantic way to solve this problem? I want each element to have unique click functions associated with them, so I thought giving them divs and classes would make the most sense for interacting with them later.

Thanks!

Answer 1

JSFIDDLE DEMO

HTML structure:
There are many ways to achieve vertical navigation.
The most common will be using ul and li :

 <div id="lnav_container"> <ul id="lnav"> <li class="lnav_item"><a href="#">Item 1</a></li> <li class="lnav_item"><a href="#">Item 2</a></li> <li class="lnav_item"><a href="#">Item 3</a></li> <li class="lnav_item"><a href="#">Item 4</a></li> </ul> </div> 

There are also very common a tags inside li .

Styling:
You can get rid of bullets by having list-style-type: none; for ul .
You can give them a different hover style with the :hover selector to make it more interactive.

 .lnav_item { width: 74%; margin-top: 10px; } .lnav_item:first-child {margin-top: 0px;} .lnav_item.selected {width: 86%;} .lnav_item a { display: inline-block; width: 100%; line-height: 30px; padding: 8px 5px 5px 0px; background-color: yellow; color: black; font-weight: bold; text-decoration: none; border-radius: 2px 12px 12px 2px; } .lnav_item.selected a { background-color: green; color: white; font-size: 18px; } .lnav_item:hover a {background-color: orange;} 

To get rid of a underline, use text-decoration: none; and override it by default if you want.

Javascript (jQuery):
Easily bind clickListener to elements:

 $('.lnav_item a').on('click', function() { //$(this) item is clicked, do whatever you want $('.lnav_item').removeClass('selected'); $(this).parent().addClass('selected'); }); 

EDIT:

If you want to give each of the navigation elements a different style, etc., you can achieve it in different ways:

jsfiddle demo

• You can use the nth-child() CSS selector:

   .lnav_item:nth-child(2):hover a{background-color: #252F1D;} .lnav_item:nth-child(3):hover a{background-color: white;} 

• If you do this in jQuery, alternatively you can use the function with the (index) parameter and possibly use eq if necessary.

   $('.lnav_item > a').each(function(index) { if(index == 0) { //give it a different onClick, CSS rule, etc } //and so on }); 

  • index is zero based, but nth-child starts with one.

Answer 2

Typical HTML5 markup for a site navigation menu would be the nav element , which contains the ul element :

 <nav> <ul> <li><a href="/1">1</a></li> <li><a href="/2">2</a></li> <li><a href="/3">3</a></li> <li><a href="/4">4</a></li> </ul> </nav> 

If you can get your CSS / JS to work with this markup (+ class attributes or whatever you need), great.
If you need more elements, add div and / or span elements: they are meaningless , so they do not change the semantics of your document.

Answer 3

NAV elements are just LISTS.

You do not need to wrap them.

Here is an example of my own navigation bar (I also placed it on the left side of the screen)

  <nav> <ul style="list-style: none"> <h3>Main Menu</h3> <li style="font-size: 100%"><b>Article 1</b></li> <ul style="list-style: none"> <br> <dt> <li style="font-size: 100%"><a href="Article 1.1">Article 1.1</a> </li> <br> <li style="font-size: 100%"><a href="Article 1.2">Article 1.2</a> </li> <br> </dt> </ul> <br> </nav>