≡ Menu

How to Make Lists Look Better in HTML


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. However, what do you do when you want to have a list with Roman numerals, or letters (A,B,C) rather then 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:

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

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

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

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!

Related Posts with Thumbnails

{ 0 comments… add one }

Leave a Comment