Creating Ordered & Unordered Lists
Print This Post
One CommentRelated Reading |
In this section of our free online web design course, we’re going to learn how to form a list of items by using HTML. There are two types of lists you can create – the ordered list and the unordered list.
HTML Ordered Lists
An ordered list is a list that consist of list items that are marked with an order of numbers or letters (i.e. 1, 2, 3, etc. or a, b, c, etc.). Let’s assume we wish to create a list of books to purchase. To make an ordered list of books to purchase, we’ll need to use the <ol> (ordered list) and the <li> (list item) tags. The <ol> and </ol> tags determine the starting and ending points of the ordered list. The <li> and </li> tags determine the starting and ending points of each list item. Our example HTML code is below:
| <html> <head> </head> <h3>List Of Books To Purchase:</h3> <ol> </body> |
The output of this HTML code is as follows:
List Of Books To Purchase:
|
As you see in the output, our list items have been consecutively labelled 1, 2 and 3. This has created an “ordered list” of items.
You can change the label type of an ordered list by using the “type” attribute of the <ol> tag. If you wish your list to use capital letters as labels, you simply add the expression [type="A"] (without the brackets) to the <ol> tag. Online Web Design Course will not let you get away without an example, of course:
| <html> <head> </head> <h3>List Of Books To Purchase:</h3> <ol type=”A”> </body> |
We’ll have an ordered list that is labelled with capital letters as an output:
List Of Books To Purchase:
|
You can also use the “a” value along with the “type” attribute to have lowercase letters, and the “I” or “i” values to have Roman numerals as labels.
Sidenote: It’s a good idea to note that you can place line breaks, paragraphs, links, images, other lists, etc. inside a list item.
HTML Unordered Lists
Your free online web design course continues without losing pace as we get to know the unordered list, which is a list of items that do not have a particular order among each other. The list items are generally labelled with a small black circle. The source HTML code is almost the same as an ordered list, except we use the <ul> (unordered list) tag instead of the <ol> (ordered list) tag. Here’s an example HTML code:
| <html> <head> </head> <h3>List Of Websites To Add To Favorites:</h3> <ul> </body> |
Thus we get a list of websites to add to your favorites:
List Of Websites To Add To Favorites:
|
That’s all there is to unordered tags. Now let’s learn how to “nest” lists.
Nesting Lists
“Nesting” means embedding the same type of tags inside each other. For example, if you put a list inside a list item of another list, you’ll create a “nested list”. Let’s try to nest an ordered list into an unordered list:
| <html> <head> </head> <h3>Places To Travel To:</h3> <ul> </body> |
I’ve boldened the “nested” ordered list for you. The above HTML code gives the below output in a web browser:
Places To Travel To:
|
You can also nest unordered lists into ordered lists, ordered lists into ordered lists, or unordered lists into unordered lists. You can nest as many lists as deep as you like (i.e. nest an unordered list into an ordered list, which is in turn nested inside an unordered list, which is in turn nested into an ordered list, etc.)
If you enjoyed this lesson, please link to it 
Now that we have learned all about creating lists, we can head on to the next lesson of our free website design course to learn how to change the size, color and typeface of your text.
Loading ...
Your HTML formatting for ordered Alpha list is wrong. It should read as follows:
“”
“”
“List Of Books To Purchase:”
“”
“Make Your Site Sell!”
“Learning Web Design”
“Cascading Style Sheets”
“”
It seems that the use of has been deprecated.