Last week, we established that lists are a great tool for bloggers because they can make your content more readable by grouping related ideas and simplifying complex processes. We also learned when to use a list and how to write a list, but we didn’t cover the specifics of using the different kinds of lists. In this post, we’ll get to the nitty gritty of ordered and unordered lists, and next week, we’ll wrap up with definition and nested lists.

Writing ordered and unordered lists on the Web is a little different than writing them, say, in Microsoft Word because you can manipulate them with code. As a blogger, it helps to know what’s happening behind the scenes in the code, so if something goes wrong in your WYSIWYG editor, you’ll know how to fix it. I understand that code can be a little intimidating, but the HTML and CSS you use for structuring and styling lists is pretty simple. That said, let’s dig in.

Using Ordered Lists
If you’ve ever watched the Late Show with David Letterman, then you’re familiar with his top-ten lists, and if you were putting one of his lists (or your own) online, you would use an ordered list. Ordered lists work best in these situations:

• When you want to emphasize the total number of items
• When you need to complete items in a specific order
• When you want to communicate priority

Behind the scenes, your HTML won’t look much like a numbered list, which is why it helps to know what all those brackets and letters mean. An ordered list in HTML begins and ends with the <ol></ol> tags—ol stands for ordered list. Clever, huh? Individual list items go between the <ol></ol> tags and begin and end with <li></li> tag (li stands for list item). Your HTML might look like the code below:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Just as long as your list items are nested in the <ol></ol> tags, they’ll be numbered or lettered; we’ll discuss defining those specs in a moment.

Using Unordered Lists
Think of unordered lists as the twin brother to ordered lists. Whereas ordered lists are perfect for emphasizing a number, an order, or a priority, unordered lists are perfect for emphasizing that which is unnumbered, unordered, or without priority. On the outside, they have their differences, but on the inside—in the code—they’re almost the same. An unordered list begins and ends with the <ul></ul> tags (ul stands for unordered list), but their list items—the <li></li> tags—are identical to an ordered list. The only difference is the opening and closing tags. An unordered list’s HTML code might look like this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

If you decide you need to switch your list type from one to the other in the middle of your writing, all you have to do is switch the opening and closing tags. How handy is that?

Styling Your Lists
Once you have your ordered and unordered lists written, you are free to style them. Now, I won’t go into the ins and outs of CSS or all of the style commands here, but I will discuss the CSS options for the unordered- and ordered-list types:

• list-style-type (ordered list). Declares the marker system you want to use for your ordered list:
  • decimal
  • decimal-leading-zero
  • upper-alpha
  • lower-alpha
  • upper-roman
  • lower-roman
  • lower-greek
  • upper-latin
  • lower-latin
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha
• list-style-type (unordered list). Declares the marker system you want to use for your unordered list:
  • disc
  • circle
  • square
• list-style-image. Specifies the image you want to use as your list marker. If you don’t want to use a number or a bullet from the options above, you can use a little icon instead.
• list-style-position. Declares the position of your list marker. You might think of this as specifying whether or not you have a hanging indent. Outside = hanging indent; inside = no hanging indent.

Like I said before, writing ordered and unordered lists online is a bit different than writing them in your average word processor, but as long as you have a basic grasp on HTML and CSS, you’ll have no problems. Next week, we’ll wrap up this series of posts with definition and nested lists.

Previous List Posts

• Blogging with Lists, Part I: An Overview

—–
Image Source