Lists, more than just Bullets

[LSW]

This falls into the category of using the right tools for the job. How often do you use Lists and for what? Chances are good that you do not use it as often as you should because ?they are ugly?. Good argument until CSS was released, now it is just old fashioned.

 

So when should you use them? Well a list of items of course:

• widget 1
  
• widget 2
  
• widget 3
  

 

 

But we have far more lists in our sites when you think about what you do:

 

Home | About Us | Sitemap | Contact

 

What is that really, a list of links isn?t it?

 

So to be semantically correct you should write:

• Home
  
• About Us
  
• Sitemap
  
• Contact
  

 

That makes sense to blind users, it makes sense to Search Engines, which is always good & it is common sense. But ugly, at least till you add CSS to them. You can replace the bullet, you can remove the bullet and you can even lay it out Horizontally.

 

 #navlist li {list-style: none;  display: inline;}

 

That is standard today with CSS based designs. Remove the CSS and the site degrades into a logical design with link lists. It also allows you far more freedom when formatting your link to look like buttons, as you can format the

• &
• as well as the tags.

   

  Now this is fine and common as it is. But let?s take another look shall we. What can you say about how we set up our navigation? Look at the order, Home - our main page, then about the company, then a sitemap to help navigation and make search engines happy, last Contact info. That would be a order right? Home being considered most important, followed by about, sitemap and contact.

   

  So is it really logical to use a unordered list? How about this from a logical semantic view? :

• Home
  

About Us
Sitemap
Contact

 

Now you can still ditch the numbers and make it horizontal just as the other list. Only now you are telling those with no CSS and search engines that the links are in order of importance. This is what I do and more designers are switching to ordered lists, but it is not as wide spread.

 

So you are happy now and thinking that that was easy enough and you need to start doing it. Well there is just one more list that is often overseen. That is a Definition List. ?Say what??. Yea that was my reaction too, I had seen them mentioned but never knew what to do with them. So let?s have a look at what they are used for and where you can use them. But first what is it and what does it even look like?

 

Definition Term 1
Definition Description 1

Definition Term 2
Definition Description 2

 

That is it, just the tags are a bit different and you need two tags per item.

for the Term and Description. The term is usually flush left, the description is generally one line down and indented so it looks something like this [The DD should be indented bit I cannot figure how to show that in BBCode. Just try the code in your browser]:

 

CSS

Cascading Style Sheets, used for formatting web sites while keeping the look sperate from the structure.

 

XHTML

This is a form of XML formatted to look like HTML, but should be served as XML.

 

 

That is the classic use of it. In another forum I recently helped a designer with a problem, in this case it was about a customers product line. I suggested that a Definition list may be the best way, using the product name as the term and the description as the definition description, something like this:

 

Widget 1

Green widgets used for blue cars in Japan

 

Widget 2

Red Widgets used for Russian Airplanes

 

 

One last word on definition lists and when you could use them. Consider your site map, a tool search engines use often as well as many disabled visitors like blind users. This would be a excellent way to offer a page name and an explanation on what the page does:

 

Portfolio

Examples of my work

 

Contact

A contact form you can use to send me mail as well as telephone and address.

 

 

With a little CSS you can change it to look more like a traditional list if you like, but the semantic meaning remains the same. So you see there is more to lists as you may have thought and using them in the right way will improve your site, improve use of your site by search engines and improve use of your site by disabled users. It is a win/win situation.

[LSW]

[webdevelopment]

When marking up content which could be defined in some way as a list, you should consider using an unordered list (

• ) for presentation. Not only does it improve the readability of your HTML code, it also applies meaning to content which would otherwise have none.

 

[sPAM Links Deleted]

Edited September 8, 2009 by Andrea