HTML Lists

HTML list tags are use on the web articles, website navigation menus, and product features of websites. HTML list tags offers authors three ways for specifying list of page information.

There are three types of lists you can use, and each one has a specific purpose and meaning. That are:

Unordered list — This list items use to group a set of related items, in no particular order.

Ordered list — This list items use to group a set of related items, in a specific order.

Description list — This list items use to display a list of terms and their descriptions.

Unordered List:

An unordered list is use when rearranging the order of the list items of the information. Unordered list starts with the <ul> tag and end with the </ul> tag and each list item starts with the <li> tag. The HTML unordered list is a collection of related elements of HTML page.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<label>HTML color</label>

<ul>

<li>White</li>

<li>Black</li>

<li>Red</li>

<li>Green</li>

<li>Yellow</li>

<li>Blue</li>

</ul>

</body>

</html>

In HTML you can use different type list attribute for <ul> tag. The attribute are –

Square

Disc

Circle

Square example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<title>HTML Square List</title>

</head>

<body>

<label>HTML Unordered Square List</label>

<ul type="square">

<li>White</li>

<li>Black</li>

<li>Red</li>

<li>Green</li>

<li>Yellow</li>

<li>Blue</li>

</ul>

</body>

</html>

Disc Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<title>HTML Disc List</title>

</head>

<body>

<label>HTML Unordered Disc List</label>

<ul type="disc">

<li>White</li>

<li>Black</li>

<li>Red</li>

<li>Green</li>

<li>Yellow</li>

<li>Blue</li>

</ul>

</body>

</html>

Circle Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<title>HTML Circle List</title>

</head>

<body>

<label>HTML Unordered Circle List:</label>

<ul type="circle">

<li>White</li>

<li>Black</li>

<li>Red</li>

<li>Green</li>

<li>Yellow</li>

<li>Blue</li>

</ul>

</body>

</html>

HTML Ordered Lists

An ordered list start with the <ol> tag and end with the </ol> tag and each list item starts with the <li> tag. HTML Ordered lists are used for lists of items for which the order of the items does matter. An ordered list contains information exactly the same as for an unordered list where order should be emphasized.

Ordered list is change the text of the list items that need to appear in a specific sequential order.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<label>vehicle category</label>

<ol>

<li>Bicycle</li>

<li>Bike</li>

<li>Car</li>

<li>Bus</li>

</ol>

</body>

</html>

In HTML you can use different type list attribute for <ul> tag. The attribute are –

Numerals Case

Upper Case Numerals

Lower Case Numerals

Upper Case Letters

Lower Case Letters

Numerals Case Example

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<title>HTML Numerals Case</title>

</head>

<body>

<label>vehicle category</label>

<ol type="1">

<li>Bicycle</li>

<li>Bike</li>

<li>Car</li>

<li>Bus</li>

</ol>

</body>

</html>

Upper Case Numerals Example

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<title>HTML Upper CaseNumerals</title>

</head>

<body>

<label>vehicle category</label>

<ol type="I">

<li>Bicycle</li>

<li>Bike</li>

<li>Car</li>

<li>Bus</li>

</ol>

</body>

</html>

Lower Case Numerals Example

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<title>HTML Lower CaseNumerals</title>

</head>

<body>

<label>vehicle category</label>

<ol type="i">

<li>Bicycle</li>

<li>Bike</li>

<li>Car</li>

<li>Bus</li>

</ol>

</body>

</html>

Upper Case Letters Example

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<title>HTML Upper CaseLetters</title>

</head>

<body>

<label>vehicle category</label>

<ol type="A">

<li>Bicycle</li>

<li>Bike</li>

<li>Car</li>

<li>Bus</li>

</ol>

</body>

</html>

Lower Case Letters Example

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<title>HTML Lower CaseLetters</title>

</head>

<body>

<label>vehicle category</label>

<ol type="a">

<li>Bicycle</li>

<li>Bike</li>

<li>Car</li>

<li>Bus</li>

</ol>

</body>

</html>

HTML Definition Lists

The HTML definition list start with the <dl> tag and end with the </dl> tag and each list item synchronism with the <dt> and <dd> that is define item and describe item in the list.

Hi
Do you want to make web application with php and php framework(CI, Laravel)? Want to make android application with hybrid framework ?
Then contact with us.
We provide support for developing website and web application at very affordable price.
E-Mail us at: dataflow1117@gmail.com