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

1. NESTED LISTSTeaching 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:
A. BYUI
A. CIT160
A. JavaScript programs
A. Chapter Examples
B. Non-functioning
B. Chapter Essays
A. Chapter 1
B. Chapter 2
B. CIT230
A. Main Website
A. Teaching Presentation
B. Design Principles
B. Sandbox Website
A. Experimenting
B. Theory
C. Frustration
C. 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 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

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