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? :
1. Home
2. About Us
3. Sitemap
4. 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:
- 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, use of your site by search engines and disabled users. It is a win win situation.