NESTED LISTSTeaching Presentation By Justin Fryar

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:A. BYUI

A. CIT160A. JavaScript programs

A. Chapter ExamplesB. Non-functioning

B. Chapter EssaysA. Chapter 1B. Chapter 2

B. CIT230A. Main Website

A. Teaching PresentationB. Design Principles

B. Sandbox WebsiteA. ExperimentingB. TheoryC. Frustration

C. HTML Templates

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.

HOW TO START A NESTED LISTAny 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

➤ 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

EXAMPLE 1➤ The code below will have the following result, notice

that we are using the <ol> here making it an ordered list

EXAMPLE 2➤ Here we are using <ul> meaning an unordered list.

EXAMPLE 3➤ You can also change what the bullets look like