Nested Unordered Lists

1. Nested Unordered Lists Angela Powell – CIT 230

2. Review of unordered lists Let’s do just a quick review of unordered lists before we start nesting them… • Get Ready… • Get Set… • GO!!!!

3. Unordered list coding Unordered lists use bullets are other shapes at the beginning of each item, and the items are not in a specific order. The code to begin an unordered list is <ul> (unlike an ordered list which is <ol>). The items in the list each begin with <li> and end with </li>.The entire list is closed with </ul>. Take a grocery list for example: The Resulting List… Bread Eggs Milk The Code… <ul> <li> Bread</li> <li> Eggs </li> <li> Milk </li> </ul>

4. Nesting the list If I want to expand my grocery list, I might remember that I need to get a birthday cake. But of course I can’t just get a cake… I will also need to get candles and party blowers. I might also remember I need to get some fruit. To make my list easier to read and organize, I would like it to be in nested form like the following: Bread Eggs Milk Birthday Items Cake Candles Party Blowers Fruit Bananas Apples Grapes Nesting an unordered list is simply inserting another unordered list inside the code. For example:

5. The code Here is how you would code the previous nested grocery list… <ul> <li> Bread </li> <li> Eggs </li> <li> Milk </li> <li> Birthday Items <ul> <li> Cake </li> <li> Candles </li> <li> Party Blowers </li> </ul> </li> <li> Fruit <ul> <li> Bananas </li> <li> Apples </li> <li> Grapes </li> </ul> </li> </ul>

6. Semantics One thing to keep in mind for HTML5 is the correct semantics that should be used for nesting lists. Look at the following two examples and see if you can pick up on the difference… Example 2 <ul> <li> Item One </li> <li> Item Two <ul> <li> Sub-item One </li> <li> Sub-item Two </li> </ul> </li> <li> Item Three </li> <li> Item Four </li> </ul> Example 1 <ul> <li> Item One </li> <li> Item Two </li> <ul> <li> Sub-item One </li> <li> Sub-item Two </li> </ul> <li> Item Three </li> <li> Item Four </li> </ul>

7. Semantics - too Pick Me! The difference is in where the closing </li> tag is placed. The correct way to place it is in Example two. The second unordered list is really a sub-list of Item Two, which makes it a part of Item Two’s list item coding. Both of these examples will look the same on a web page, but example 2 is the semantically correct one. Example 2 <ul> <li> Item One </li> <li> Item Two <ul> <li> Sub-item One </li> <li> Sub-item Two </li> </ul> </li> <li> Item Three </li> <li> Item Four </li> </ul> Example 1 <ul> <li> Item One </li> <li> Item Two </li> <ul> <li> Sub-item One </li> <li> Sub-item Two </li> </ul> <li> Item Three </li> <li> Item Four </li> </ul>

8. How many nests? How many nested lists can you do? As many as you want! Just don’t get crazy! Remember… Start an unordered list with <ul> and end it with </ul>. Each list item starts with <li> and ends with </li>. A nested list appears indented by inserting another <ul> before the sub-list items. When adding a nested list, don’t close the sub-list heading item with </li> until after the closing </ul> of the nested list.

9. Happy nesting!!! Thanks for watching!