nested lists in html
TRANSCRIPT
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