2.7 HTML Lists
2.7 HTML Lists
● Organize information
● Simple structure
● Easy to read and
write
https://en.wikipedia.org/wiki/List_of_lists_of_lists
“This article is a list of articles that are themselves lists of
articles that are also lists on the English Wikipedia”
HTML Lists
Unordered Ordered
● Item 1. First item
● Item 2. Second item
● Item 3. Third item
● Item 4. Fourth item
Introducing
Preview
Introducing
Preview
Nesting Lists
Nesting Lists
● Apples
● Cookies
● Milk
Nesting Lists
● Apples
● Cookies
○ Chocolate Chip
○ Peanut butter
● Milk
Nesting Lists
● Apples
● Cookies
○ Chocolate Chip
1. White Chocolate Chip
2. Dark Chocolate Chip
○ Peanut butter
● Milk
Nesting Lists
● Apples
● Cookies Indentation shows
○ Chocolate Chip
1. White Chocolate Chip the nesting
2. Dark Chocolate Chip structure
○ Peanut butter
● Milk
Nesting Lists
<ul>
<li>Apples</li>
● Apples
<li>Cookies</li>
<li>Milk</li>
● Cookies
</ul> ● Milk
Preview
Nesting Lists
<ul>
<li>Apples</li>
<li> ● Apples
Cookies
<ul>
● Cookies
<li>Chocolate Chip</li> ○ Chocolate Chip
<li>Peanut Butter</li> ○ Peanut Butter
</li>
</ul>
● Milk
<li>Milk</li>
</ul>
Preview
Nesting Lists
<ul>
<li>Apples</li>
<li> ● Apples
Cookies
<ul>
● Cookies
<li>Chocolate Chip</li> ○ Chocolate Chip
<li>Peanut Butter</li> ○ Peanut Butter
</li>
</ul>
● Milk
<li>Milk</li>
</ul>
Preview
Nesting Lists
<ul>
<li>Apples</li>
<li> ● Apples
Cookies
<ul>
● Cookies
<li>Chocolate Chip</li> ○ Chocolate Chip
<li>Peanut Butter</li> ○ Peanut Butter
</li>
</ul>
● Milk
<li>Milk</li>
</ul>
Preview
Let’s see this in the editor!