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

    and

      tags. Both types of lists use the same secondary tag,

    • , 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.

      1. One is the loneliest number
      2. Two can be as lonely as one
      3. Three Dog Night was a good band
      This is my ordered list. The bullets will be numbers.

      1. One is the loneliest number
      2. Two can be as lonely as one
      3. Three Dog Night was a good band
      This is my unordered list. The bullets will be dots.

      • In no particular order
      • Here are the points
      • I'd like to make
      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.

  1. The Simpsons
    • Homer
    • Marge
    • Bart
    • Lisa
    • Maggie
  2. The Flintstones
    • Fred
    • Wilma
    • Pebbles
  1. The Simpsons
    • Homer
    • Marge
    • Bart
    • Lisa
    • Maggie
  2. The Flintstones
    • Fred
    • Wilma
    • Pebbles

 
 
I hope you 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 › (›) character or the → (→) 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.

Advertisements

One Comment

Add yours →

  1. So useful I Twittered it :)

One Pingback

  1. traiteur rabat

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: