Scribd
Upload
10 views24 pages

2.7 HTML Lists

The document provides an overview of HTML lists, including unordered and ordered lists, and their respective tags (<ul> for unordered and <ol> for ordered). It explains the structure and syntax for creating lists, including examples and the concept of nesting lists. Additionally, it highlights the importance of lists in organizing information clearly and effectively.

Uploaded by

00055038
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views24 pages

2.7 HTML Lists

The document provides an overview of HTML lists, including unordered and ordered lists, and their respective tags (<ul> for unordered and <ol> for ordered). It explains the structure and syntax for creating lists, including examples and the concept of nesting lists. Additionally, it highlights the importance of lists in organizing information clearly and effectively.

Uploaded by

00055038
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

HTML Lists

● Organize information
● Simple structure
● Easy to read and
write

List of reasons 1. Arrange things in


to use lists order
a. Most important
b. Less important
c. Least important
2. Can be about
anything
Lists are everywhere

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

The <ul> Tag

The <ul> tag defines an unordered list


Introducing

The <li> Tag

The <li> tag defines a list item inside a list


Unordered List Example
<ul>
List content goes here
</ul>
Unordered List Example
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Milk</li>
<li>Bread</li>
</ul>
Unordered List Example
<ul>
<li>Apples</li> ● Apples
<li>Bananas</li> ● Bananas
<li>Milk</li> ● Milk
<li>Bread</li> ● Bread
</ul>

Preview
Introducing

The <ol> Tag

The <ol> tag defines an ordered list


Ordered List Example
<ol>
List content goes here
</ol>
Ordered List Example
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Milk</li>
<li>Bread</li>
</ol>
Ordered List Example
<ol>
<li>Apples</li>
<li> is used
<li>Bananas</li>
<li>Milk</li>
regardless of what
<li>Bread</li>
type of list we’re
</ol> making!
Ordered List Example
<ol>
<li>Apples</li> 1. Apples
<li>Bananas</li> 2. Bananas
<li>Milk</li> 3. Milk
<li>Bread</li> 4. Bread
</ol>

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!

You might also like