Lists
Lists in HTML can be a very easy way to format text without using <br> tags. Some things simply lend themselves to being put into a list...ordered or unordered. You can make the call as to whether or not something should just be made into a list. If you find yourself pining over how to format something and are using <br> tags, consider using a list instead. Here's how they work.
Ordered Lists
There two main types of lists you use: ordered and unordered lists. An ordered list will be numbered or alphabetized. An unordered list will simply be bulleted (hence, unordered). To begin an ordered list, you use the <ol> tag (ol stands for ordered list...can you guess what the tag for an unordered list is?). Within a list, you will need place list items...these are the actual contents of the list. You enclose them in <li> tags. Take a look at the following ordered list:
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol>
That code would produce the following ordered list:
- Item 1
- Item 2
- Item 3
- Item 4
There are different ways to format ordered lists. All you need to do is append a "type" attribute to the <ol> tag so that you can create different ordering types, like so:
<ol type="1"> <li type="A"> makes uppercase letters (A, B, C) <li type="a"> makes lowercase letters (a, b, c) <li type="I"> makes uppercase Roman numerals (I, II, III) <li type="i"> makes lowercase Roman numerals (i, ii, iii) </ol>
So <ol type="A"> would result in an ordered list like this:
- Item 1
- Item 2
- Item 3
- Item 4
Unordered Lists
What about unordered lists? The code is almost identical, except you use an <ul> tag instead of an <ol> tag (It's easy to remember...<ol> vs. <ul>...<ol> stands for ordered list and <ul> stands for unordered list). Take a look at the following code...it will look remarkably familiar:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
That code would produce the following unordered list:
- Item 1
- Item 2
- Item 3
- Item 4
