Nested lists in HTML

Learn how to use ordered lists, unordered lists, in HTML programming.

1. Nested Lists Teaching Presentation By Justin Fryar

2. What are nested lists? A nested list is a way of segmenting a list of related items. Kind of like how you would organize your classes. For example: BYUI CIT160 JavaScript programs Chapter Examples Non-functioning Chapter Essays Chapter 1 Chapter 2 CIT230 Main Website Teaching Presentation Design Principles Sandbox Website Experimenting Theory Frustration HTML Templates

3. When are they used? Anytime you want to organize a lot of information into sub categories. If you have a website with hundreds of pages worth of information, displaying all of that on a single page would be overwhelming and disorganized. Nesting lists enables you to categorize much as you would create folder and then subfolder to organize your information.

4. How to start a nested list Any list in HTML must begin with either <ol> or <ul> <ol> means “ordered list” Every item in the list is numbered starting at 1 or A <ul> means “unordered list” Every item in the list is not numbered in sequential order

5. After the use of either <ol> or <ul> you can use the tag <li> <li> designates a list item It is not a void tag which means you must end it with a </li> <ol> and <ul> are also not void tags and so must end with a </ol> and </ul> Let’s look at some examples of code

6. Example 1 The code below will have the following result, notice that we are using the <ol> here making it an ordered list

7. Example 2 Here we are using <ul> meaning an unordered list.

8. example 3 You can also change what the bullets look like