Bulleted and Ordered Lists

An Ordered list means it is 'numbered' in some way. It makes it easier when referring to a point that's made later in the discussion. (ie: as outlined in point number 4...).

Unordered is of course, not ordered. If there is no reason to have a list in sequential numbers then you could get by with an unordered list. You could run off a list of features, or benefits, or whatever you thinik would be best presented in a list in point form rather than having to incorporate the same information in a conversational type manner.

Unordered lists use bullet points.

The Code

ul = Unordered List
ol = Ordered List
li = List point

The <li> is used with each line of your list. The <ul> or <ol> is surrounds (nests) the entire list of <li>. This tells the web browser, "hey, we've got an Ordered/Unordered List on the menu!".

Here's your ordinary every day bulleted list...

• First item


• Second item


• Third item

The Code...

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Just so you know, the default shape is called a Disc...

<ul type="disc">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

By slipping in a type="circle" into the <ul> tag you're instructing the list to display the specified shape as the bullet point.

• First item


• Second item


• Third item

The Code...

<ul type="circle">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

• First item


• Second item


• Third item

The Code...

<ul type="square">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

If you want your list to be ordered instead of unordered, it's a simple matter of just substituting the <ul> elements with <ol>, which of course stands for Ordered List.

1. First item


2. Second item


3. Third item

The Code...

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

You can change the stylings of your ordered lists too, by using different values. You can do Roman numerals, letters, and both of the above in small characters.

<ol type="A"> Starts a numbered list, using capital letters.

1. First item


2. Second item


3. Third item

<ol type="a"> Starts a numbered list, using small letters.

1. First item


2. Second item


3. Third item

<ol type="I"> Starts a numbered list, using capital roman numbers.

1. First item


2. Second item


3. Third item

<ol type="i"> Starts a numbered list, using small roman numbers.

1. First item


2. Second item


3. Third item

If you need to start the count at a number other than 1, you just add another attribute, like so: <ol start="5">

You can stop and restart your numbered list...

<ol> Starts a numbered list, using normal numbers.

1. First item


2. Second item


3. Third item

...we take a break and then continue...

<ol start="4"> The startpoint is added to pick up from where you previously left off:

4. Fourth item


5. Fifth item


6. Sixth item

The same can be done with the letter and roman numeral ordered lists. But you have to be sure to slip in the right type and also use normal numbers for the start element.

<ol type="i"> Starts our roman numeral numbered list.

1. First item


2. Second item


3. Third item

<ol type="i" start="4"> and off we go:

4. Fourth item


5. Fifth item


6. Sixth item

You can use an appropriate image for a bullet point. Which will open up all sorts of ideas and opportunities that are only limited by your imagination.

• Item one


• Item two


• Item three

You need to have your image uploaded to some webspace. And the smaller and more compact you make the graphical icon the better. Make sure you use the <ul> (Unordered List) and not the <ol> (Ordered List).

This can either be done like this...

<ul style="list-style-image: url(http://img.squidoo.com/icon-view.gif);">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

Or like this...

<ul>
<li style="list-style-image: url(http://img.squidoo.com/icon-view.gif);">Item one</li>
<li style="list-style-image: url(http://img.squidoo.com/icon-view.gif);">Item two</li>
<li style="list-style-image: url(http://img.squidoo.com/icon-view.gif);">Item three</li>
</ul>

I'm outlining both ways because I'll soon show some code where you can do a few interesting tricks. While the former is less messy and easier, the latter can be used to feature different graphics for each line.

I don't recommend going crazy with graphics but here are some examples of how they can be used effectively. Replace the image URL with your own images (be sure to resize them smaller than 16 pixels in height)...

• Cross


• Tick

Code...

<ul>
<li style="list-style-image: url(http://img402.imageshack.us/img402/4650/01noei7.gif);">Cross</li>
<li style="list-style-image: url(http://img524.imageshack.us/img524/5798/01yesbq3.gif);">Tick</li>
</ul>

• Cross


• Tick

Code...

<ul>
<li style="list-style-image: url(http://img253.imageshack.us/img253/673/02nolh8.gif);">Cross</li>
<li style="list-style-image: url(http://img253.imageshack.us/img253/149/02yespw9.gif);">Tick</li>
</ul>

• Cross


• Tick

Code...

<ul>
<li style="list-style-image: url(http://img201.imageshack.us/img201/6590/05nozw4.gif);">Cross</li>
<li style="list-style-image: url(http://img108.imageshack.us/img108/7391/05yesvi0.gif);">Tick</li>
</ul>

• Cross


• Tick

Code...

<ul>
<li style="list-style-image: url(http://img155.imageshack.us/img155/624/03novh9.gif);">Cross</li>
<li style="list-style-image: url(http://img155.imageshack.us/img155/9935/03yesgq0.gif);">Tick</li>
</ul>

• Cross


• Tick

Code...

<ul>
<li style="list-style-image: url(http://img155.imageshack.us/img155/3755/04noic7.gif);">Cross</li>
<li style="list-style-image: url(http://img253.imageshack.us/img253/7789/04yestv4.gif);">Tick</li>
</ul>

Soon I'll be posting some animated bullets, like the one demonstrated here...

• Item one


• Item two


• Item three

As well as the code.

You can of course make any of the text in your lists into clickable links

<li><a href="#">Item one</a></li>

Change # to the URL of your choice (be sure to have the http:// at the start).

You can push your points in further by increasing the margin...

<ul style="margin-left: 50px;">
<li type=circle>First item</li>
<li type=circle>Second item</li>
<li type=circle>Third item</li>
</ul>

You can slip style="margin-left: 50px;" into any UL or OL tag. Change the number of pixels to suit.

You can put bullet lists inside bullet lists.

• First item




• First item of embedded list


• Second item of embedded list


• Third item of embedded list




• Second item


• Third item

The Code...

<ul>
<li>First item</li>
<ul>
<li>First item of embedded list</li>
<li>Second item of embedded list</li>
<li>Third item of embedded list</li>
</ul>
<li>Second item</li>
<li>Third item</li>
</ul>

You will have noticed that the bullet type changes by default. This can be changed by implementing a different type element as outlined in the aforementioned lessons.

You can go on and further divide the embedded points into letter or roman numeral ordering. This is a powerful way to communicate important information.

1. First item




1. First item of first embedded list


2. Second item of first embedded list


3. Third item of first embedded list




2. Second item




1. First item of second embedded list


2. Second item of second embedded list




3. Third item

The Code...

<ol>
<li>First item</li>
<ol type="i">
<li>First item of first embedded list</li>
<li>Second item of first embedded list</li>
<li>Third item of first embedded list</li>
</ol>
<li>Second item</li>
<ol type="i">
<li>First item of second embedded list</li>
<li>Second item of second embedded list</li>
</ol>
<li>Third item</li>
</ol>