PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

HTML Basics: Using Lists

Posted by on 18th Dec 2008 | 10 comments

There are three types of lists that we can use on our web pages:

  • Unordered Lists
  • Ordered Lists
  • Definition Lists

Unordered Lists

Unordered Lists should be used when you wish to have a list of data but there is no specific order to that list. The list I’ve used above, to list the list types, is an unordered list. An unordered list can also be associated with a bullet point list.

The correct syntax for an unordered list is

[sourcecode language="html"]

  • A List Item
  • Another list item
  • Yet another list item

[/sourcecode]

Which would give us:

  • A List Item
  • Another list item
  • Yet another list item

An unordered list is probably the most used HTML list. It’s used as a standard bullet point list, or it’s often used to hold lists of data which is then styled (more on that next week!) to control the look of the list, and often to remove the bullet points completely. Most modern coded websites use an unordered list for their navigation menu, regardless of whether it’s a vertical or horizontal list. On Blogging Tips the top navigation is in fact an unordered list. This is marked up with code similar to the following (I’ve just removed most of the classes to make it easier to read):

[sourcecode language="html"]

[/sourcecode]

As you can see, before the styling is applied, the menu is just an unordered list. If you turn the CSS off in your browser you will get a standard bullet point list.

Ordered Lists

When you have a specific order for a list then you should use an ordered list. This is fairly similar in mark up to an unordered list, except the opening and closing tag are different. To create a numbered list we use

[sourcecode language="html"]

  1. First List Item
  2. Second list item
  3. Third list item

[/sourcecode]

Which would give us an output of

  1. First List Item
  2. Second list item
  3. Third list item

To change the ordering from numbers to letters or other sequential ordering we use CSS, which I’ll cover next week.

There is one attribute that goes into the list item, which allows you to change the order value of that item. This also causes all later list items to follow on sequentially from that value i.e. it has a knock on effect. For example, if you wanted to omit the number 2 from your list, then you can use the attribute ‘value’ to do this e.g.

[sourcecode language="html"]

  1. First List Item
  2. Second list item but with an order number of 3
  3. Third list item, now with an order number of 4

[/sourcecode]

And this would give us:

  1. First List Item
  2. Second list item but with an order number of 3
  3. Third list item, now with an order number of 4

I’m sure at this point, someone will point out that the value attribute is in fact deprecated for XHTML 1.0 and HTML 4.01. The W3C realised this was a mistake at some point, as this is in the XHTML 2.0 specification, and on that basis I still continue to use the value attribute, as it’s very useful!

Definition Lists

The least used, and often not even understood list is a definition list. Personally I think that’s a shame as a definition list has a lot more use than people realise, and to create a better structured site, it certainly has its place. A definition list is just that, a list of titles and descriptions. The basic usage of this is:

[sourcecode language="html"]

Title of something to Define
A description or information that defines the title
Title of something else to Define
A description or information that defines this title

[/sourcecode]

This would give us the output of

Title of something to Define
A description or information that defines the title
Title of something else to Define
A description or information that defines this title

However, definition lists can be used for so much more than a simple title and description list. There are many uses for it – a list of FAQs is probably the simplest of examples; menu items – the section header in the definition title, and then inside the definition description is an unordered list with all the items for that section; a dictionary reference with the word as the definition title and then several definition descriptions depending on how many there were. There are plenty of other uses for a definition list. I always use them when explaining CSS properties.

Conclusion

When you intend to have a list of information, regardless how it’s going to look, then you should usually be using a list of some description. Just make sure you try and pick the right one! Next week I’ll explain how we can style these lists and this will open up the potential that lists really have in your design.


A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

10 comments - Leave a reply
  • Posted by whizblog on 18th Dec 2008

    should know the basic tp go further right?

    i never know about the "value"..

    now i know, it could be useful..

    thanks

  • Posted by Melissa Donovan, Cop on 18th Dec 2008

    Thanks for these tips! I didn't know about the definition lists and I could definitely use those instead of all the strange tweaking I've had to do to make my lists look like… well… definition lists. Thanks again.

  • Posted by John Blue Star on 19th Dec 2008

    Oh.. good post. I know html. But the definition list and Value="3" are new to me now. Good post. Thanks for point them here..

  • Posted by Sales Fairy on 19th Dec 2008

    I frequently use the unordered and ordered list, but the definition list is a new one to me. I will have to try that in my posts now :) Thanks for showing me something new.

  • Posted by Dennis Edell on 19th Dec 2008

    I definitely learned something here! One of the major things I didn't "get" was what most of the letters inside the meant. Thanks!

  • Posted by Scarlet on 21st Dec 2008

    Hi,this tips is very useful,as i am a new blogger ,i dont know about html and xhtml at all,also with lot of head pain i have created a blog

    visit and tell me what and how to improve my blogs.
    http://www.mdmindia.blogspot.com

    my email is, likescarlet@gmail.com

  • Posted by Debajyoti Das on 25th Dec 2008

    Hello, Could you tell me or post about Positioning Images in Blog Posts … Not the normal align="left" or "right". I mean when we are showcasing something ie, show a lot of thumbnails , one after another. I really find it difficult displays Stuff on my Blog properly.

  • Posted by Blogger Tips on 1st Jan 2009

    readers love a good list .. Top 10 or Something done in so many steps always seem to be popular

  • Posted by Sarah on 2nd Jan 2009

    @Debajyoti – Post up in the Blogging Tips forums for help on this as I've not covered floats yet, which is what you'd need.

    Cheers for all the other comments :)

  • Posted by Chris - Free PS3 on 2nd Jan 2009

    Many thanks for an informative post – I'm fairly new to HTML and have been leaving Dreamweaver to sort out the lists with often frustrating results. The tip on the value='3' method is a great help – I've wanted to do this on a few occasions and just wasn't confident with editing the HTML code. Look forward to reading the CSS article.