Question

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?

Answer 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