Bullet and numbered lists in html

I honestly thought that I had written a blog already that covered html lists, but apparently not. I know that I have shown a couple of you some tips and tricks, but now I will formally get this written for you guys.

Essentially there are two types of lists that a web browser reads. They are: ordered <ol> and unordered <ul>. You would use an ordered list if the items are sequential (1,2,3, ... A,B,C ... i, ii, iii). Unordered lists are bullet points. Here are some examples of ordered and unordered lists:

How to make toast:	Why online learning is good:
Put bread in toaster Turn toaster on Wait for bread to toast Remove toast when done butter toast and put junk on it	Allows for asynchronous discussion Prevents academic loafing Utilized interactivity and technology Provides scheduling flexibility Less intimidating for shy students

And in case you are wondering what the code for those above lists looks like: <table style="border-spacing: 30pt 0pt;"> <tr> <th>How to make toast: </th> <th>Why online learning is good: </th> </tr> <tr> <td> <ol> <li>Put bread in toaster</li> <li>Turn toaster on</li> <li>Wait for toast to...toast</li> <li>Remove toast when done</li> <li>butter toast and pu junk on it</li> </ol> </td> <td> <ul> <li>Allows for asynchronous discussion</li> <li>Prevents academic loafing</li> <li>Utilized interactivity and technology</li> <li>Provides scheduling flexibility</li> <li>Less intimidating for shy students</li> </ul> </td> </table>

You'll notice that what you are seeing up above is actually a 2x2 table with some cell spacing and no border. The lists are in quadrants III and IV.

To any list there are two parts: the list definition, <ol> or <ul>, and the list item, <li>. The former is what tells the browser "hey, we're going to be having a list over here". The latter is saying "okay, this is one of the items". If the list is an ordered list, then it knows to call the first <li> 1, and the second and third <li>'s 2 and 3. Later in this post I will walk you through what to do if you want the list to instead be sequential differently (e.g. A,B,C). If the list is unordered, <ul>, then each <li> is interpreted as just a bullet point, though you can specify what those bullet points look like.

So again, here are the basic components of an html list:

Unordered list
Why online learning is good:
 <ul>
  <li>Allows for asynchronous discussion</li>
  <li>Prevents academic loafing</li>
  <li>Utilized interactivity and technology</li>
  <li>Provides scheduling flexibility</li>
  <li>Less intimidating for shy students</li>
 </ul>

Ordered list
Why online learning is good:
 <ol>
  <li>Allows for asynchronous discussion</li>
  <li>Prevents academic loafing</li>
  <li>Utilized interactivity and technology</li>
  <li>Provides scheduling flexibility</li>
  <li>Less intimidating for shy students</li>
 </ol>

Unordered list
Why online learning is good:
Allows for asynchronous discussion Prevents academic loafing Utilized interactivity and technology Provides scheduling flexibility Less intimidating for shy students
Ordered list
Why online learning is good:
Allows for asynchronous discussion Prevents academic loafing Utilized interactivity and technology Provides scheduling flexibility Less intimidating for shy students

You can see that whether bullet points or numerical, the code for the two types of lists are very similar. There is a third type of list that we most likely will not use in eCollege. It is a definition list. I have only used this one time, and it was while creating the TCS Style Guide. If you are in a position where you need to create a glossary or a dictionary-like list, let me know and I will walk you through it. Most likely you'll want to just use Articulate Engage and do something fun and flash-based.

So now on to the different types of ordered lists. This is actually very easy and is best shown:

<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Letters list:</h4>
<ol style="list-style-type:upper-alpha">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase letters list:</h4>
<ol style="list-style-type:lower-alpha">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Roman numbers list:</h4>
<ol style="list-style-type:upper-roman">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase Roman numbers list:</h4>
<ol style="list-style-type:lower-roman">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

Numbered list:

Apples
Bananas
Lemons
Oranges

Letters list:

Apples
Bananas
Lemons
Oranges

Lowercase letters list:

Apples
Bananas
Lemons
Oranges

Roman numbers list:

Apples
Bananas
Lemons
Oranges

Lowercase Roman numbers list:

Apples
Bananas
Lemons
Oranges

There is also a little flexibility when it comes to unordered lists:

<h4>Disc bullets list:</h4>
<ul type="disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Circle bullets list:</h4>
<ul type="circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Square bullets list:</h4>
<ul type="square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

Disc bullets list:

Apples
Bananas
Lemons
Oranges

Circle bullets list:

Apples
Bananas
Lemons
Oranges

Square bullets list:

Apples
Bananas
Lemons
Oranges

If you want to know more values that can be used in lists, check out the official web standards guildelines: W3C. This is a whole lot of information and is a good stopping point. But...since we're on a roll, let's keep going. Now that you pretty much have a general idea of how to create a list, let's go ahead and trick out our lists. Some questions you might have:

Can I have a list within a list?
Can my ordered list go backward (like a "countdown")?
Does my ordered list always need to start with 1,2,3...or can I start with 10,20,30 (for example)?
Is it possible to create a multi-column numbered list?

Can I have a list within a list?

Absolutely. I would not encourage nesting right away until you are comfortable looking at the html. All those <li>'s, </ol>'s, </ol>'s, can blur together, but if you think you can handle it, then go ahead. Within a <li> you can start a new list. Here is an example of someone out and about running errands.

<ul>
  <li>Costco
    <ul>
      <li>eggs</li>
      <li>meat</li>
      <li>diapers</li>
    </ul>
  </li>
  <li>Whole Foods
    <ul>
      <li>soup</li>
      <li>organic garbage</li>
    </ul>
  </li>
  <li>restaurant
    <ol>
      <li>order</li>
      <li>eat</li>
      <li>pay</li>
    </ol>
  </li>
</ul>

Costco
- eggs
- meat
- diapers
Whole Foods
- soup
- organic garbage
restaurant
1. order
2. eat
3. pay

Notice that if I include a nested list, I don't close the <li> until the nested list is complete. So the list within Costco reads:

<li>Costco
   <ul>
     <li>eggs</li>
     <li>meat</li>
     <li>diapers</li>
   </ul>
</li>

in reality the original list only has three items: costco, whole foods, restaurant. But each item has a list within it. When the lists become complicated, it is a good idea to organize them with indentations like I did above. In reality, web browsers do not care how many spaces there are between elements. The web browsers understand   to be the equivalent of a space. Thus, I could write that Costco list as:

<li>Costco<ul><li>eggs</li><li>meat</li><li>diapers</li></ul></li>

and it would still render the same. In fact, that's exactly how the browser interprets my code before translating it for the viewer. Moving on to the next question:

Can my ordered list go backward (like a countdown)?

Easy. Let's look at David Letterman's top 10 signs you are obsessed with facebook.

<ol>
 <li value="10">You created a profile for your kitty.</li>
 <li value="9">If someone rejects your friend requests, you show up at this house and tearfully demand why</li>
 <li value="8">You’ve been diagnosed with something called “Facebook @$$” </li>
 <li value="7">If you don’t update your page for 10 minutes, friends assume you died</li>
 <li value="6">Named your daughter Gracebook</li>
 <li value="5">Only photos on your Facebook page are of you uploading photos to your Facebook page</li>
 <li value="4">No number 4 — writer on Facebook — do you see the irony?</li>
 <li value="3">When wife sneezes, you change your status update to “Gesundheit”</li>
 <li value="2">If computer freezes, you start swearing like Mel Gibson</li>
 <li value="1">You spent last Saturday night...[let's make this a PG rated blog]</li>
</ol>

You created a profile for your kitty.
If someone rejects your friend requests, you show up at this house and tearfully demand why
You’ve been diagnosed with something called “Facebook @$$”
If you don’t update your page for 10 minutes, friends assume you died
Named your daughter Gracebook
Only photos on your Facebook page are of you uploading photos to your Facebook page
No number 4 — writer on Facebook — do you see the irony?
When wife sneezes, you change your status update to “Gesundheit”
If computer freezes, you start swearing like Mel Gibson
You spent last Saturday night...[let's make this a PG rated blog]

Does my ordered list always need to start with 1,2,3...or can I start with 10,20,30 (for example)?

The clever ones among you will have figured out that the answer to this question involves the same technique as the answer to the last question. In fact, this is also how you can continue ordered lists after you have interrupted them. Just because I am lazy and tired of writing lists, I will recycle that last list.

<ol>
 <li value="10">You created a profile for your kitty.</li>
 <li value="20">If someone rejects your friend requests, you show up at this house and tearfully demand why</li>
 <li value="30">You’ve been diagnosed with something called “Facebook @$$” </li>
</ol>
<p><strong>This would represent a "break" in the list.  Notice that in the code I closed the list prior to this paragraph, and created a new list post-paragraph</strong></p>
<ol>
 <li value="40">If you don’t update your page for 10 minutes, friends assume you died</li>
 <li value="50">Named your daughter Gracebook</li>
</ol>
<p><strong>And another break in the list.</strong></p>
<ol>
 <li value="60">Only photos on your Facebook page are of you uploading photos to your Facebook page</li>
 <li value="70">No number 4 — writer on Facebook — do you see the irony?</li>
 <li value="80">When wife sneezes, you change your status update to “Gesundheit”</li>
</ol>

You created a profile for your kitty.
If someone rejects your friend requests, you show up at this house and tearfully demand why
You’ve been diagnosed with something called “Facebook @$$”

This would represent a "break" in the list. Notice that in the code I closed the list prior to this paragraph, and created a new list post-paragraph

If you don’t update your page for 10 minutes, friends assume you died
Named your daughter Gracebook

And another break in the list.

Only photos on your Facebook page are of you uploading photos to your Facebook page
No number 4 — writer on Facebook — do you see the irony?
When wife sneezes, you change your status update to “Gesundheit”

Is it possible to create a multi-column numbered list?

Short answer: yes, there are several ways to do that. However, this question was really a cliff-hanger question, because columns will involve css, which we will learn later.

Final thought and example is that this blog post should really be able to get you started making lists and not having to rely on the wysiwyg editor, which often does a great job of screwing up everything. Know that there are a great many things that you can do to lists via css. I'll leave you with a creative example of using css with a list. This example is in the course PRI300M. The SME authored four FO's for this particular unit, and assigned a handful of readings that correlated with each FO. She asked me to make a list that was specific enough so that students would know which readings went with which FO. This is the list I created and the code that I wrote:

1. When Does TV Become DS?
2. Can you count on having a captive audience?
3. NAB, pgs. 50-54
1. 1219.DS, What Retailers Think
2. LUTA, pgs. 11-12, 33-34
1. 1189.DS: Has the Time Come for Retailers to Adopt This Emerging Technology?
2. 1149.In-Dealership Network Enhances the Harley-Davidson Lifestyle
3. Transforming the State of Mind of Air Travelers in Cyprus
4. NAB, pgs. 114-117
1. 1180.Leveraging Emerging In-Store Technology
2. NAB, pgs. 114-117
3. RM, pgs. 111-118
4. Top Dayparting Tips for Hospital DS

<style type="text/css">
    ol {
    list-style: decimal;
    }
    ol ol {
    list-style: lower-alpha;
    }
</style>

<ol>
    <li>
      <ol>
        <li><a href="http://www.wirespring.com/dynamic_digital_signage_and_interactive_kiosks_journal/articles/When_does_TV_become_digital_signage_-306.html">When Does TV Become DS?</a>
        </li>
        <li><a href="http://www.wirespring.com/dynamic_digital_signage_and_interactive_kiosks_journal/articles/Can_you_count_on_having_a_captive_audience_-324.html">Can you count on having a captive audience? </a></li>
        <li>NAB, pgs. 50-54</li>
      </ol>
    </li>
    <li>
      <ol>
        <li>1219.DS, What Retailers Think
        </li>
        <li>LUTA, pgs. 11-12, 33-34
        </li>
      </ol>
    </li>
    <li>
      <ol>
        <li>1189.DS: Has the Time Come for Retailers to Adopt This Emerging Technology?
        </li>
        <li>1149.In-Dealership Network Enhances the Harley-Davidson Lifestyle
        </li>
        <li><a href="http://www.youtube.com/watch?v=KFCaTMRLe2Y&feature=player_embedded">Transforming the State of Mind of Air Travelers in Cyprus</a></li>
        <li>NAB, pgs. 114-117</li>
      </ol>
    </li>
    <li>
      <ol>
        <li>1180.Leveraging Emerging In-Store Technology
        </li>
        <li>NAB, pgs. 114-117
        </li>
        <li>RM, pgs. 111-118
        </li>
        <li>Top Dayparting Tips for Hospital DS
        </li>
      </ol>
    </li>
</ol>

I hope this was insightful. Don't be afraid to dive into the html editor to make your lists from now on!

TCS Instructional Design

Search This Blog