Skip to main content

Bullet and numbered lists in html

Image
By

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:
  1. Put bread in toaster
  2. Turn toaster on
  3. Wait for bread to toast
  4. Remove toast when done
  5. 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:

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:
  • 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:
  1. Allows for asynchronous discussion
  2. Prevents academic loafing
  3. Utilized interactivity and technology
  4. Provides scheduling flexibility
  5. 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:

Numbered list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Letters list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Lowercase letters list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Roman numbers list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Lowercase Roman numbers list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

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

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:

  1. Can I have a list within a list?
  2. Can my ordered list go backward (like a "countdown")?
  3. Does my ordered list always need to start with 1,2,3...or can I start with 10,20,30 (for example)?
  4. 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.

  • 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:

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 &nbsp; 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.

  1. You created a profile for your kitty.
  2. If someone rejects your friend requests, you show up at this house and tearfully demand why
  3. You’ve been diagnosed with something called “Facebook @$$”
  4. If you don’t update your page for 10 minutes, friends assume you died
  5. Named your daughter Gracebook
  6. Only photos on your Facebook page are of you uploading photos to your Facebook page
  7. No number 4 — writer on Facebook — do you see the irony?
  8. When wife sneezes, you change your status update to “Gesundheit”
  9. If computer freezes, you start swearing like Mel Gibson
  10. 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.

  1. You created a profile for your kitty.
  2. If someone rejects your friend requests, you show up at this house and tearfully demand why
  3. 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

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

And another break in the list.

  1. Only photos on your Facebook page are of you uploading photos to your Facebook page
  2. No number 4 — writer on Facebook — do you see the irony?
  3. 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

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

Labels:

Comments

Post a Comment

Popular posts from this blog

basic html tables

By
Hey all, I figure that I would expose you guys to the basics of creating tables in html. There are many ways to do this. The wysiwyg way of constructing a table would be to use the built-in eCollege table wizard, or to build a table in in MS Office or Dreamweaver. These methods offer limited customization, as is the nature of visual editors. In order to really customize every aspect of the table, you must have a working knowledge of the html used to create the table. The basic elements of a table are as follows: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> This is what the code for a basic table with a border looks like. And this is what that table would look like: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 The elements include table rows <tr> and table
2 comments
Read more

SME Relationship-Building: Tips of the Week

By
A couple of things came to mind during some recent SME conversations that I want to share. You may be already doing these things, but I think it helps to put them down here for all of us to think about and discuss... Given our mandate from Nancy Davis to consult to our SMEs on pedagogical issues related to learning outcomes, FOs, etc., it's likely that we'll run into SMEs who are not used to spelling out their instructional rationales and strategies as specifically as we're asking them to, even if they are at some level "good teachers." I try to motivate them by noting that the coursemap is now viewed as much of a ‘document of record’ as the Prospectus and Syllabus are – so it needs to show the rigor and clarity of outcomes of a 'premier' e-learning experience. And if a SME's LO/FO/assignment connections aren't as Bloom-worthy as they need to be, let's communicate to him or her that "my job is to help your expertise shine through"
Post a Comment
Read more

Encouraging student voice and video comments

By
Hey team, Won and I are at the Sloan-C Emerging Technology conference (#et4online), and I wanted to share some ideas with you all regarding the utilization of audio and video features in our discussion boards.  The presenter who inspired this post is Michelle Pacansky-Brock who wrote an ebook about VoiceThread. Her institution bought a site license so that students could make comments on VT via phone, ensuring that technology wouldn't be a barrier to student participation. My thoughts are that our online and most blended students have both computers with webcams/microphones and smartphones. I think that in Canvas we don't need to rely so much on VT to facilitate an audio/visual discussion, as these features are integrated into the learning platform. Michelle conducted research in her classes via surveys and discovered that when she as an instructor left voice and video comments, 97% of the students appreciated such comments. However, 75% of the students were unwilling
Post a Comment
Read more