7/27/2019 MELJUN CORTES HTML Lists

1/24

HTML Lists

An ordered list:1.The first list item2.The second list item

3.The third list item

An unordered list: List item List item List item

The most common HTML lists areordered and unordered lists.

MELJUN CORTES

7/27/2019 MELJUN CORTES HTML Lists

2/24

HTML List Tags

Tag Description

Defines an ordered list

Defines an unordered list Defines a list item

Defines a definition list

Defines an item in a definition list Defines a description of an item

in a definition list

http://www.w3schools.com/tags/tag_ol.asphttp://www.w3schools.com/tags/tag_ol.asphttp://www.w3schools.com/tags/tag_ul.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/tags/tag_ul.asphttp://www.w3schools.com/tags/tag_ol.asp

7/27/2019 MELJUN CORTES HTML Lists

3/24

HTML Unordered Lists

An unordered list starts with

the tag. Each list item

starts with the tag.

The list items are marked with

bullets (typically small blackcircles).

7/27/2019 MELJUN CORTES HTML Lists

4/24

Example:

*Sample Codes

Coffee

Milk

7/27/2019 MELJUN CORTES HTML Lists

5/24

*Sample output:

Coffee Milk

7/27/2019 MELJUN CORTES HTML Lists

6/24

HTML Ordered Lists

An ordered list starts with the

tag. Each list item starts

with the tag.

The list items are marked with

numbers.

7/27/2019 MELJUN CORTES HTML Lists

7/24

Example:

*Sample Codes

Coffee

Milk

7/27/2019 MELJUN CORTES HTML Lists

8/24

*Sample output:

1.Coffee2.Milk

7/27/2019 MELJUN CORTES HTML Lists

9/24

HTML Definition Lists

A definition list is a list of items, witha description of each item.

The tag defines a definition list. The tag is used in conjunction

with (defines the item in the list)

and (describes the item in thelist):

7/27/2019 MELJUN CORTES HTML Lists

10/24

Example:

*Sample Codes

Coffee

- black hot drink

Milk- white cold drink

7/27/2019 MELJUN CORTES HTML Lists

11/24

*Sample output:

Coffee

- black hot drink

Milk

- white cold drink

7/27/2019 MELJUN CORTES HTML Lists

12/24

Tip:

Inside a list item you

can put text, linebreaks, images, links,

other lists, etc.

7/27/2019 MELJUN CORTES HTML Lists

13/24

Different types of ordered lists

Numbered list:

Apples

BananasLemons

Oranges

Letterslist:

Apples

Bananas

Lemons

Oranges

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_orderedhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered

7/27/2019 MELJUN CORTES HTML Lists

14/24

7/27/2019 MELJUN CORTES HTML Lists

15/24

Output:

Numbered list:

1. Apples

2. Bananas

3. Lemons

4. Oranges

Letters list:

A. Apples

B. Bananas

C. Lemons

D. Oranges

Lowercase letters list:

a. Apples

b. Bananas

c. Lemons

d. Oranges

Roman numbers list:

I. Apple

II. Bananas

III. Lemons

IV. Oranges

Lowercase Roman numbers list:

i. Apples

ii. Bananas

iii. Lemons

iv. Oranges

7/27/2019 MELJUN CORTES HTML Lists

16/24

Different types of unordered lists

Disc bullets list:

Apples

Bananas

Lemons

Oranges

Circle bullets list:

Apples

Bananas

Lemons

Oranges

Square bullets list:

Apples

Bananas

LemonsOranges

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unorderedhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered

7/27/2019 MELJUN CORTES HTML Lists

17/24

Disc bullets list:

Apples

Bananas

Lemons Oranges

Circle bullets list:

o Apples

o Bananaso Lemons

o Oranges

Square bullets list:

Apples

Bananas

Lemons

Oranges

Output:

7/27/2019 MELJUN CORTES HTML Lists

18/24

Nested list

A nested List:

Programming Language

Turbo

Turbo Basic

Turbo C

C++

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists2http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists2

7/27/2019 MELJUN CORTES HTML Lists

19/24

Output:

A nested List:

Programming Language

TurbooTurbo Basic

oTurbo C

C++

7/27/2019 MELJUN CORTES HTML Lists

20/24

A nested List:

Coffee

Tea

Black teaGreen tea

China

Africa

Milk

Another type ofNested list

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists2http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists2

7/27/2019 MELJUN CORTES HTML Lists

21/24

Output:

A nested List: Coffee

Tea

oBlack tea

oGreen tea

China

Africa

Milk

7/27/2019 MELJUN CORTES HTML Lists

22/24

Definition list

A Definition List:

Programming Language

C++

Basic Programming Language

Turbo Basic and C

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists3http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists3

7/27/2019 MELJUN CORTES HTML Lists

23/24

Output:

A Definition List:

Programming Language

C++

Basic Programming Language

Turbo Basic and C

7/27/2019 MELJUN CORTES HTML Lists

24/24