How To Make Lists Look Better In HTML, Part 2

Note: This post has been updated from its original version to reflect more HTML knowledge on my part…

I started this mini-series with a look at how to spread things out more easily using standard (though outdated) HTML list tags. Now, a look at my secret weapon — fake lists. It looks like a list, but it isn’t a list at all.

By the way, these tips are meant for folks who aren’t on intimate terms with CSS or are working on sites where they don’t have access to the CSS — there may be more elegant ways to accomplish this stuff, but I’m no designer/coder.

So, first, let’s look at the problem we’re trying to solve:

normalunordereslist

(Note: I’m using an example from George Aspland’s recent Marketing Land column, so be sure to check it out.)

The above doesn’t look terrible, but, for my taste, it’s kind of bunched up. I’d like some spaces between the bulleted items. And, in some cases, I’d like to break up the bulleted items into multiple paragraphs. It’s just easier to read with a bit more space.

So, what I do is cheat.

Rather than make an unordered list, I enclose all the to-be-bulleted items between <div> tags. For the first one I add styling information like this:<div style=”padding-left: 50px;”> This indents the text (on the left), which adds some nice white space. You could also add right space by using <div style=”padding-left: 50px; padding-right 50px;”> and tweak the number of pixels until it looks like you’d like.

But what about the bullets? Well, turns out there’s special code — &bull; or &#8226; — to create a bullet. So I add those to the front of each bulleted paragraph.

Here’s how it turned out on my edit of the above text:

spacedoutlist

You can do the same thing with ordered lists. Just write the actual numbers or letters, rather than using a <LI> tag within an ordered list. The bullets or numbers aren’t out in the white space, as they are with real lists, but I prefer that quirk over bunched up text.

Works for me. Maybe it’ll work for you. Thoughts?

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.

Continue reading “How to Make Lists Look Better in HTML”