2

Scenario
 I was reviewing one of my devs HTML structure for a project and I noticed he used a bunch of <div> elements to build the main navigation. I then noticed that on one of the pages he had used a table to build a quiz type layout.

 - Question <radio> <radio> <radio>
 - Question <radio> <radio> <radio>

Lastly, I saw the footer navigation consisted of a bunch of anchor links wrapped in a <div> (not too bad in my opinioin).

Being a perfectionist about the quality of my teams work, I told him to refactor all those sections and place them in unordered lists. I said

Each of those sections are in fact lists. A list of questions, a list of main navigation links and a list of footer links. Therefore, you should be using a <ul>.

He took it well but said "Why?" Aren't you defying the purpose of a list, shouldn't it be used for bullet points?

I told him that it was a good question but that I'm just following a common practise and what the rest of the world is doing.

So in your opinion, is overusing lists bad practise?

Improve this question
7
  • 2
    A blunt, but true comment: you are right, he is wrong. Commented Feb 28, 2011 at 1:17
  • Related: stackoverflow.com/questions/4134881/… Commented Feb 28, 2011 at 1:17
  • @Pekka - but navigation links aren't really tabular data.. the quiz.. well.. perhaps. Commented Feb 28, 2011 at 1:19
  • 2
    Overusing anything is, by definition, bad practice. Commented Feb 28, 2011 at 1:22
  • @Alohci, wow thanks for that bright comment :) Commented Feb 28, 2011 at 1:27

5 Answers 5

Reset to default
1

The quiz layout strikes me as tabular data. I would absolutely put that into a table, especially if the radio buttons are accompanied by variable-length text.

For the rest, you are right: Lists have nothing to do with "having bullet points". List elements are the right element for any kind of lists of information, no matter how they are styled by default.

A less-known HTML element worth knowing about is dl for definition lists. Many things get put into uls that semantically fit much better into dls. I have never used it myself, though - I too have the tendency to cram everything into uls. :)

An example from the W3C page:

<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>
  <DT>Hacker
  <DD>a clever programmer
  <DT>Nerd
  <DD>technically bright but socially inept person
</DL>

Related: Proper definition for "tabular data" in HTML

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks @Pekka! I ended up getting him to format the quiz layout as <li><span>text</span><input /><input /><input /></li> and relied on CSS for the positioning. I didn't have to put text next to the radios so it was achieved using very little markup. In this scenario, we used an <ol> though since it IS an ordered list really. I have used definition lists in the past mainly for FAQ type of scenarios, and am yet to teach my devs to start using them when appropriate.
@Marko yeah, that definition (as an ordered list) makes sense too. I just am a connoisseur of tables whenever they save you a huge layout headache (and make half-way semantic sense :)
touche. I was a table-hater for over 2 years before I actually started using them where it really made sense. I think at one point I even built a 8col table layout using an unordered list. I promise I've changed.
@Marko I've been through that too! Oh the nightmares. And when you're done making it work in IE, FF and Chrome, you open it in IE6 and start again.
@Pekka웃's logic doesn't make any sense - anything can be a list of information. The examples at w3.org/TR/html401/struct/lists.html#h-10.1 clearly shows li is for bulleted / numbered lists. Not header and footer links etc. If you absolutely must divide a collection of items, that's what div is for. As they say, "perfection is achieved, not when there's nothing left to add, but when there's nothing left to take away".
1

Any unordered list should be in a ul.

Any ordered list should be in a ol.

The semantics are clearly represented by sticking to this practice.

There are, of course, exceptions. This is where a little common sense will help. For example, it could probably be argued a site's structure is one big unordered list ([header, content, footer]), but I wouldn't recommend doing it.

Improve this answer

Comments

1

In HTML 4, it's a best practice to build navigation using lists, not because everyone is doing it, but because navigation are often lists themselves. They are, simply, lists of links. (Ordered lists are often very useful in building semantic forms as well.)

In HTML 5, all this gets superceded by the more specific <nav> element. It is what it sounds like.

Improve this answer

2 Comments

This doesn't make any sense. When you think about it, anything can be considered a list. A list of HTML tags, a list of page sections, a list of paragraphs that make out an article. We need to stop overusing li's!
@MarkBoulder we have stopped. This post is historic. You can tell I predicted that we would move to navs in HTML5 when I wrote this post 3 and 1/2 years ago.
1

It comes down to code flexibility and ongoing management. Lists are just that, lists. They work great for both content bullet points and navigation menus. Some HTML coders misuse lists for the purpose of fundamental formatting. This is wrong. It's easy to say anything is a list... I put all my socks in the same drawer side by side... so they must be lists right?? No, not really.

Keep the use of lists to either standard content formatting or menus. Don't use them for general page layout, it'll just make your code a rigid mess.

Improve this answer

Comments

1

The use of unordered lists has gotten completely out of hand. They are the new tables. I constantly see them being used anytime you have two or more similar elements following one another. I see people putting block level elements inside them. That's not semantically correct in my book. It's just a practice that has grown out of all proportion.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.