Nested lists in HTML

Nested lists in HTML

• 1.
  NESTED LISTSTeaching PresentationBy 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 STARTA 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 theuse 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 ➤ Thecode below will have the following result, notice that we are using the <ol> here making it an ordered list
• 7.
  EXAMPLE 2 ➤ Herewe are using <ul> meaning an unordered list.
• 8.
  EXAMPLE 3 ➤ Youcan also change what the bullets look like