in the basics by fyd on 21 Jan 2008
Another block-level element that is used often is the list. We will be going over three types of lists. Ordered Lists are used for items that you want to appear in sequential order - each item will have a number before it. Unordered Lists are used when the order of items isn't as important - each item will have a bullet in front of it. Finally, Definition Lists which are used when defining a term. Let's get started.
Ordered Lists
Here is the code to create an ordered list:
<html> <head> <title>Ordered List</title> </head> <body> <ol> - starting ordered list <li>List Item 1</li> - list element <li>List Item 2</li> <li>List Item 3</li> <li>Last List Item</li> </ol> - ending ordered list </body> </html>
So as you can see, we start an ordered list with <ol> and end it with </ol>. Each item you want to be in the list is surrounded by <li> and </li>. And like I said earlier there is a number in front of each item in the list.
Unordered Lists
Here is the code to create an unordered list:
<html> <head> <title>Unordered List</title> </head> <body> <ul> - starting unordered list <li>List Item 1</li> - list element <li>List Item 2</li> <li>List Item 3</li> <li>Last List Item</li> </ul> - ending unordered list </body> </html>
The setup is very similar to the ordered list except here we start with <ul> and end it with </ul>. Again, each item you want to be in the list is surrounded by <li> and </li>. And like I said earlier there is a bullet in front of each item in the list.
Definition Lists
Here is the code to create a definition list:
<html> <head> <title>Definition List</title> </head> <body> <dl> - starting definition list <dt>Term 1</dt> - term to define <dd>The definition of term 1</li> <dt>Term 2</dt> <dd>The definition of term 2</dd> </dl> - ending definition list </body> </html>
Definition lists are started similarly to the other two - we start with <dl> and end it with </dl>. The rest is a little different though. The term you would like to define is surrounded by <dt> and </dt>. Then the next thing you do is place the definition of that term between <dd> and </dd>. As you can see in the results, the definition is indented.
There you have it. Lists are pretty easy, but are used quite often. The best thing to do is to practice them. You can even nest lists within each other. I'll leave you with a nested list example.
<html> <head> <title>Nested Lists</title> </head> <body> <ol> - starting ordered list <li>Numbered Item 1 - open first ordered list element <ul> - starting unordered list <li>nested bullet 1</li> <li>nested bullet 2</li> </ul> - ending unordered list </li> - close first ordered list element <li>Numbered Item 2 <ul> <li>nested bullet 1</li> <li>nested bullet 2</li> </ul> </li> </ol> - ending ordered list </body> </html>
It's a lot easier to indent your code when doing lists - it just makes it easier to read and follow, and remember it won't show up that way in the browser. When doing a nested list just remember to watch when you close your <li> tags.
Popularity: 7% [?]
