Lists

Video Links

Examples from Videos

Notes

There are three types of lists in html: ordered, unordered, and definition. The first two let you create lists of items that are numbered or bulleted respectively. You can insert items at any point without messing up your list (it will automatically re-number, for example). The definition list is a way to format headings and sub-text.
Ordered Lists
Ordered list automatically number list items for you. Here is an example.
  1. This is the first item in our list. I am making it sort of long and verbose to show you that after your text wraps, the list feature maintains a nice indent so that the number is in one column and the text is in a column next to it.

    It even works if you put breaks or paragraph marks in your document as I have done here.

    The rest of the items in this list will be Soviet Space Dogs

  2. Laika
  3. Chernuska
  4. Chayka
  5. Lisichka
  6. Otvazhnaya
To create one of these lists, we start with the <ol> tag, which stands for Ordered List. Each item in the list is preceded by an <li> tag (standing for List Item). There is an ending li tag, but it is sometimes omitted. It's formally correct to include it, and you should, but I grew up not using it, so I will sometimes forget. Functionally, you are unlikely to see a difference with or without it.

You can create sub-lists within a list. To do that, we simply start a new list inside of one list item:

favorite foods

  1. spaghetti
  2. fruit
  3. cheese
    1. cheddar
    2. swiss
    3. american
    4. brie
  4. lima beans
the code for the above list looks like this:

 
<b>favorite
foods
</b>


<ol> 

<li>spaghetti </li>
<li>fruit </li>
<li>cheese</li>
	<ol> 
	<li>cheddar </li>
	<li>swiss </li>
	<li>american</li>
	<li>brie </li>
	</ol> 
</li>
<li>lima beans </li>

</ol>
Note that the numbering system for the sublist is the same as the numbering for the main list. We may want to change this system. There are five types available in the ordered list: arabic numbers (1, 2, 3...), capital roman numerals (I, II, III, IV ...), lower case roman numerals (i, ii, iii, iv, v....), capital lettering (A, B, C...), and lower case lettering (a, b, c, ...). To specify which type you want, you use the type attribute in your list. The value for the above numbering systems is the first character of each type. Respectively: 1, I, i, A, a. To convert our food list, to look like this:

favorite foods

  1. spaghetti
  2. fruit
  3. cheese
    1. cheddar
    2. swiss
    3. american
    4. brie
  4. lima beans
  5. soy imitation chicken
we simply add in two type attributes:

 
<b>favorite
foods
</b>


<ol type="I"> 
<li>spaghetti </li>
<li>fruit </li>
<li>cheese</li>
	<ol type="i"> 
	<li>cheddar </li>
	<li>swiss </li>
	<li>american</li>
	<li>brie </li>
	</ol> 
</li>
<li>lima beans </li>
</ol>
Unordered Lists
The unordered list works exactly like the ordered list. Instead of using ol, however, we use ul (for unordered list). If we make that one change on the food list from above, the list will look like this:

Favorite Foods

  • Spaghetti
  • Fruit
  • Cheese
    • Cheddar
    • Swiss
    • American
    • Brie
  • Lima Beans
  • Soy imitation chicken

You can see that in unordered lists, the type changes automatically when you have a sub-list. We can still specify the different types of bullet here, just as we described the different types of numbering in the ordered list. The bullet types are circle, disc, and square and you choose them with the type attribute. Inserting type="circle" for the outer list and disc for the sub-list, our code looks like this:

Favorite Foods

  • Spaghetti
  • Fruit
  • Cheese
    • Cheddar
    • Swiss
    • American
    • Brie
  • Lima Beans
  • Soy imitation chicken

Definition Lists
Definition lists work quite differently from the two types of lists that we have seen so far.

What a definition list allows you to do is to create something akin to a dictionary definition.

This is the title part
This is the part where you list the definition. I'm making this long just to show you again that the text wraps nicely for us, just like it did in the ordered and unordered lists.

The definition list has three tags associated with it. The first is the DL tag, which stands for Definition List. As in the other two lists, the start and end tag surround the body of the list. Instead of LI tags, though, the list is divided into two parts: the title, and the definition. As shown above, the title aligns with the rest of the text in the document. It is enclosed in <dt> </dt> tags. The Body of the definition is indented and is enclosed in <dd> </dd> tags. Thus, to do the list shown above, our code would look like this: 

 
<dl> 
<dt> This is the
title part 
</dt>


<dd> This is the part where you list the definition. I'm making
this long just to show you again that the text wraps nicely for us, just
like it did in the ordered and unordered lists. 
</dd> 
</dl>