Download - Nested lists in HTML
![Page 1: Nested lists in HTML](https://reader036.vdocuments.mx/reader036/viewer/2022062900/58ec9a1e1a28abc9558b465f/html5/thumbnails/1.jpg)
NESTED LISTSTeaching Presentation By Justin Fryar
![Page 2: Nested lists in HTML](https://reader036.vdocuments.mx/reader036/viewer/2022062900/58ec9a1e1a28abc9558b465f/html5/thumbnails/2.jpg)
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
![Page 3: Nested lists in HTML](https://reader036.vdocuments.mx/reader036/viewer/2022062900/58ec9a1e1a28abc9558b465f/html5/thumbnails/3.jpg)
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.
![Page 4: Nested lists in HTML](https://reader036.vdocuments.mx/reader036/viewer/2022062900/58ec9a1e1a28abc9558b465f/html5/thumbnails/4.jpg)
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
![Page 5: Nested lists in HTML](https://reader036.vdocuments.mx/reader036/viewer/2022062900/58ec9a1e1a28abc9558b465f/html5/thumbnails/5.jpg)
➤ 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
![Page 6: Nested lists in HTML](https://reader036.vdocuments.mx/reader036/viewer/2022062900/58ec9a1e1a28abc9558b465f/html5/thumbnails/6.jpg)
EXAMPLE 1➤ The code below will have the following result, notice
that we are using the <ol> here making it an ordered list
![Page 7: Nested lists in HTML](https://reader036.vdocuments.mx/reader036/viewer/2022062900/58ec9a1e1a28abc9558b465f/html5/thumbnails/7.jpg)
EXAMPLE 2➤ Here we are using <ul> meaning an unordered list.
![Page 8: Nested lists in HTML](https://reader036.vdocuments.mx/reader036/viewer/2022062900/58ec9a1e1a28abc9558b465f/html5/thumbnails/8.jpg)
EXAMPLE 3➤ You can also change what the bullets look like