The River

The personal professional blog of Pamela Parker -- musings on marketing, advertising, media and technology.

How to Make Lists Look Better in HTML

by

The other day, Muhammad Saleem, one of our contributors at Marketing Land, tweeted a question asking how a person might format a blog post and add regular left-justified text between items in an ordered list. This might seem like an oddball inquiry, but we come across this issue all the time, especially when columns have really long lists, or lists where each item is quite long.

We try to spread out our text pretty well, so it’s easier to read and just looks less daunting. Because this list issue is so common, I’ve come up with a few tricks to overcome the issues.

First, this problem that Muhammad Saleem mentions… How do you break up an ordered list by putting text between list items? The key is a maybe little-known modifier to the ordered (and unordered) list code in HTML.

<OL></OL> is what you’d normally use to start and end an ordered list, which would automatically result in a list in which the first list item is 1., the next 2., etc. Did you know you can also have a list with Roman numerals, or letters (A,B,C) rather than numbers?  Yes, you can do that.

That’s why there are modifiers to <OL> where you can control better how your list appears. The two for ordered lists are “type” and “start.”  Type defines whether the list features normal numbers, large Roman numerals, small Roman numerals, capital letters or lowercase letters. Start defines what number the list starts with.

So, to break up an ordered list, you’d do something like this:

<OL>
<LI>Item 1
<LI>Item 2
</OL>
Text that goes between lists goes here.
<OL start=”3″>
<LI>Item 3
<LI>Item 4
</OL>

And here’s what it turns out looking like:

  1. Item 1
  2. Item 2

Text that goes between lists goes here.

  1. Item 3
  2. Item 4

This can also help if you want to add space between the items in the list, as sometimes things can get crowded if the items are long.

And you have more control than you might think for unordered lists, too. Sick of bullets? Though the bullet (•) is the default, you can also use “disc” or “square.”

For example,

<UL type=”square”>
<LI>Item 1
<LI>Item 2
</UL>

Comes out like:

  • Item 1
  • Item 2

This might be limited somewhat, as I’m unable to do the “disc” type in this WordPress — not sure why, but, anyway… try it and see for yourself.

Hope this helps someone out there! I have a second tip I’ll share next time!

Reader Interactions

Trackbacks