HTML For Dummies: Lists with a Bullet

HTML lists come in several flavors. The two most useful are the ordered list and the unordered list. Both are easy to create with the <OL> and <UL> tags. Both types of lists use the same secondary tag, <LI>, to define the individual bullet points. One of the nice things about the ordered list is that if you need to add a bullet in the middle of the list, the numbers will update automatically because they are not really there until the file is opened in a browser. Here is how you put it all together.

This is my ordered list. The bullets will be numbers. <ol> <li>One is the loneliest number</li> <li>Two can be as lonely as one</li> <li>Three Dog Night was a good band</li> </ol>	This is my ordered list. The bullets will be numbers. One is the loneliest number Two can be as lonely as one Three Dog Night was a good band
This is my unordered list. The bullets will be dots. <ul> <li>In no particular order</li> <li>Here are the points</li> <li>I'd like to make</li> </ul>	This is my unordered list. The bullets will be dots. In no particular order Here are the points I’d like to make

 
 
You can even nest the list. This allows you to make lists within lists and each indent gets a new style of bullet. Two things to remember. The indentations here are only for your readability. The browser doesn’t care about returns and tabs. Also, if you nest your list, be very careful to close your tags correctly. Otherwise, the browser won’t understand what you’re trying to do. Here are two unordered lists inside an ordered list.

<ol> <li>The Simpsons</li> <ul> <li>Homer</li> <li>Marge</li> <li>Bart</li> <li>Lisa</li> <li>Maggie</li> </ul> <li>The Flintstones</li> <ul> <li>Fred</li> <li>Wilma</li> <li>Pebbles</li> </ul> </ol>

The Simpsons Homer Marge Bart Lisa Maggie The Flintstones Fred Wilma Pebbles

 
 
I hope your read the prequel
To truly not be frustrated by lists, you must understand how a site’s style sheet (CSS) can affect how your list is displayed. Take a minute and read “It’s out of control!” for a brief synopsis of style sheets.

A web master may have defined lists in their CSS to display a non-standard bullet. It could be any character. Sometimes it’s the &rsaquo; (›) character or the &rarr; (→) character. It can be any character the CSS says it will be, but the default (no definition) character is what everyone expects, a bullet dot (·).

A word of caution. Submitting lists to other sites is always a crap shoot. What looks good today can look like garbage in six months if the site decides to change their CSS.

For more about lists and to practice building your own lists go to W3School.