Lists, Lists, And One More List

We've learned how to start a new line with the <br> tag. This comes in handy if you just have one or two items or sentences to start. What if you wanted a numbered list or a list with bullets or maybe had a string of terms with their definitions, what then? HTML has just what the doctor ordered, list building terms. There are three basic types of lists:

Numbered Lists

A numbered list is also referred to as an ordered list. The list starts with the <ol> (ordered list) tag and ends with the </ol> tag. Your list will be in between these tags. Each item in the list will be preceded by the <li> (list item) tag. The basic layout for an ordered list is as follows:

You will notice that although we did not enter any numbers preceding each list item, the browser put them there, this is your browsers default setting. The browser knows that you are building a numbered list and so it helps you out by adding the numbers for you. What, you wanted Roman numerals and not standard numbers? Fear not, we have the technology to do just that. As a matter of fact, we have the ability to use five different numbering or lettering styles. The <ol> tag has a type attribute that we may assign to it. The complete tag with its attribute would look like this, <ol type="style" > where style is your chosen numbering style.

Bulleted Lists

Bulleted lists, also known as an unordered list in the HTML world, are lists without numbers preceding each line item. The basic setup is the same as a numbered list. Each line item uses the same <li> tag. Your list will be enclosed between the <ul> and </ul> tag. The "ul" in your new tag stands for unordered list, imagine that. The bullet is a small dot, circle, or square that precedes each line item. Kind of like an exclamation point at the beginning of a sentence. They just help to identify each line in your list. As the name suggests, this type of list has no particular order to it, like my world, and is an all purpose type of list. Here is an example of a bulleted list:

Here again we have the browser adding the bullets for you. Mighty nice of the browser, huh. The <ul> tag also has a type attribute that can be added just in case you don't like the little dot. In an unordered list we have the three options when it comes to bullets, the disk, a circle, and a square. The disk is your browsers default bullet. Your tag would look something like this, <ul type="style">"style" equals the type of bullet you want to use. Below you will find some examples of each:

I just had to throw in some format tags for fun. It also shows you that you can use format tags in your line text to make more of a statement or impact or just to be different. You may be wondering how some web pages get those fancy bullets that look like arrows or stars? Those bullets are actually graphic images inserted at the beginning of a term definition. We will cover that when we get to the page that covers graphic images.

Definition Lists

Defining a definition list what this section is all about. Definition lists are just like a dictionary where there is a term <dt> followed by a definition <dd>. It looks like this, <dt>the term<dd>the definition. The <dt> tag and the <dd> tag can be placed on separate lines if you prefer, but it all ends up looking the same way on the browser. Using separate lines would be good only for making them easier for you to see. In the beginning it might prove helpful. The term and definition tags are then surrounded by the <dl> and </dl> tags. I will be using the bold font tag on each definition term as this serves to help them stand out more. This is only optional and is by no means required in order to make a definition list. The completed list would look like this:

You can see that using a bold face font helps the term to stand out. The definition is indented and placed on the next line by your browser. All lines in the same definition are indented the same and kept in line until the next term is encountered or the list ends. You may also use more than one list at a time, i.e. combine lists inside each other. How about an example:

I started with an ordered list. After the first line item I inserted a complete definition list. I then went on to the second line item and then inserted another definition list. After the second definition I placed a complete bulleted list and the finished my definition list. I then placed my third and fourth line item and completed my ordered list. View the source code to get a look at the inner workings of the above list. One more point, a definition list can be used in a couple of different ways other than a straight list. The <dt> tag can be used as a section heading instead of the header tag and the <dd> can be used as the text body. This places whole section slightly indented. The <dd> tag can be used by itself to indent and separate text such as a quote or something similar. You will probably never use all these lists very often but practice them because they do come in handy.