开发者

Over-using Ordered/Unordered Lists in HTML

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 li开发者_开发技巧sts bad practise?


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


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.


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.


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜