I'm working on creating a personal website, and right now I'm trying to figure out a XHTML/CSS template for the site. So far I've been trying to reverse engineer a number of free templates that I like. I've noticed that for things like side bar boxes and navigation bar buttons where there are a series of boxes either in a row or in a stack, some websites will use a series of DIV tags whereas other webites will use UL and LI tags.

Is there a reason for using a DIV over a UL/LI list or vise versa? Or does it just not matter because both LI and DIVs are considred "boxes"?

For example this template uses UL/LI for the side bar, and this template uses DIVs for the sidebar.

3 answers

Ktash 1851

Honestly, this comes down more to preference and needs more than anything else. I've met people who swear by the fact that menus are lists of links and therefore semantically go into ul/li structures. On the other side of things, I've also met people who say that a menu is not a list but a menu, a separate type of object entirely (as it is in HTML5) and therefore divs are more appropriate.

Display wise, it can be easier to use one over the other in certain situations. In most all cases, at the very least, you would need to set list-style-type: none; to make sure that bullets are not shown for any lists. But some people don't mind overriding those default styles because they feel it is semantically correct. And honestly, you can make one act like the other (for the most part) in just about any situation, so again, preference.

Personally, I go back and forth. It depends on what styles I have and need and also whether or not I have an existing code base. These days, unless the code I'm working on already has ul/li nav menus, I usually go with divs as I can usually use less styles to get the desired effect.

Answered about 6 years ago by Ktash

Actually, Eric, from what I saw, both templates use UL/LI for their menus. The difference is that the second example puts them inside of a DIV element. I tend to take the approach that a menu should go inside of an unordered list. Whereas a sidebar block (be it a list of links or a quote or a search or what have you) should be placed inside a DIV. So given those two choices, I prefer the second one as it makes most sense to me. However, as other answers say, it is entirely up to each developer as to his or her taste because either is semantically correct.

Answered about 6 years ago by Abinadi Ayerdis

I agree with Ktash that it's a matter of personal preference. I usually use UL/LI. I like having one element (UL) for the set, and another element for the items in the set (LI). You can use DIVs with different classes, but the different elements are more apparent to my eye with UL/LI.

Regarding styles, you typically style the container, the items, and the A elements for the links, though that depends on the specific result you want. I assign a class to the container, and use that class for all the rules I need:

  • Selector for container: ul.menu
  • Selector for item: ul.menu li
  • Selector for link: ul.menu li a
  • Selector for hover: ul.menu li.a:hover

Another way to do it is to assign different classes to the different elements:

  • Selector for container: ul.menu
  • Selector for item: li.menuitem
  • Selector for link: a.menulink
  • Selector for hover: a.menulink:hover

There's a bit of a religious war over those two approaches. Either is reasonable. The HTML is easier to read with the former, but the selectors are simpler in the latter.

Answered about 6 years ago by John Cardinal