HTML – Lists
Html Lists are used for making list type structure in web documents.
A list is a group or set of statements that define two or more related points about any topic. Makin a list means dividing the flow of work into steps and grouping up them which denotes a singular relation among items example list of products/home goods, list of players, list of content of a book, etc.
The list can be arranged or not but it shows the data in order.
In Html, Lists can be used with:
- Text Content,
- Data Representation,
- Navigation Item Styling,
- Block Arrangements,
- Grouping, etc.
Types of Html Lists
There are basically three types of lists in Html:
- Ordered List
- Unordered List
- Description List
Ordered List
The ordered list is the number type list, it represents list data with serial numbers. Like grouping in ascending order.
Ordered List is a paired tag used with the “li” list tag.
The ordered list is used to define the list type and the list tag is used for holding the list content.
Below is an example of the Html Ordered List.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>HTML - Lists</h1>
<hr>
<!--Ordered List-->
<ol>
<li>This is item One.</li>
<li>This is item Two</li>
<li>This is item Three</li>
<li>This is item Four</li>
<li>This is item Five</li>
</ol>
</body>
</html>
Here “ol” tag is for an ordered list and inside “ol” tag “li” tag is for the list. You can use many list tag inside an ol tag, it will simply add the new list item with incremented serial number. One can nested the same list items for sub listing. For sub listing in the ordered list look at the given example below.
Sub Listing/Nested Ordered List
Below is an example of Nested or Sub listing in the Html Ordered list.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>HTML - Lists</h1>
<hr>
<!--Ordered List-->
<ol>
<li>This is item One.</li>
<li>This is item Two</li>
<!--Sub list One-->
<ol>
<li>This is item Three</li>
<li>This is item Four</li>
<li>
<!--Sub List Two-->
<ol>
<li>This is item Five</li>
<li>This is item Six</li>
<li>This is item Seven</li>
</ol>
</li>
</ol>
</ol>
</body>
</html>
Hereafter second list there is another ordered list starts and after that, the third ordered list is nested inside the last list of previously ordered lists. You can also make a list hierarchy. You can also set ordered list types as the ordered list has attribute types.
Ordered List Types
| Attribute | Value | Description |
|---|---|---|
| Type | 1 | Start List With Numbers |
| Type | A | Start List With Capital Letters (Uppercase). |
| Type | a | Start List With Small Letters (Lowercase). |
| Type | I | Start List With Roman Letters/Numbers (Uppercase). |
| Type | i | Start List With Roman Letters/Numbers (Uppercase). |
Ordered List Types Example
Below is an example of All types of Ordered Lists.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>HTML - Ordered Lists</h1>
<hr>
<!--Ordered List Types-->
<!--Number Ordered List Type-->
<ol type="1">
<li>This is item One</li>
<li>This is item Two</li>
</ol>
<hr>
<!--Capital Letters Ordered List Type-->
<ol type="A">
<li>This is item Three</li>
<li>This is item Four</li>
</ol>
<hr>
<!--Small Letters Ordered List Type-->
<ol type="a">
<li>This is item Five</li>
<li>This is item Six</li>
</ol>
<hr>
<!--Roman Capital Letters Ordered List Type-->
<ol type="I">
<li>This is item Seven</li>
<li>This is item Eight</li>
</ol>
<hr>
<!--Roman Small Letters Ordered List Type-->
<ol type="i">
<li>This is item Nine</li>
<li>This is item Ten</li>
</ol>
<hr>
</body>
</html>
Ordered List always starts with number by default if any specific attribute type is not given, then the numbering will always start with 1 but you can change this according to your need. See the example below for Controlling the list counting.
Control The List Counting
Below is an example of controlling the ordered list numbering/counting.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>HTML - Ordered Lists</h1>
<hr>
<!--Ordered List Types-->
<!--Controlling Ordered List Numbering / Counting-->
<ol start="10">
<li>This is item One</li>
<li>This is item Two</li>
<li>This is item Three</li>
<li>This is item Four</li>
<li>This is item Five</li>
<li>This is item Six</li>
<li>This is item Seven</li>
</ol>
</body>
</html>
Unordered List
The unordered list is the same as the ordered list but without counting. It represents data with symbols like dot, circle, square, etc.
The unordered list is a paired tag used with the li tags. The ul tag is used to define the list type and li tag is used for holding the list data.
Below is an example of the Html Unordered List.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>HTML - Unordered Lists</h1>
<hr>
<!--Unordered List Types-->
<!-- Unordered List -->
<ul>
<li>This is item One</li>
<li>This is item Two</li>
<li>This is item Three</li>
<li>This is item Four</li>
<li>This is item Five</li>
<li>This is item Six</li>
<li>This is item Seven</li>
</ul>
</body>
</html>
Here the ul tag will make the bullet symbol or black dot symbol as default. You can use different attribute types in the unordered lists like an ordered list. There are serval attribute types of the Unordered list.
Unordered List Type
| Attribute | Value | Description |
|---|---|---|
| style="list-style-type:_value_" | disc | Black Small Dot |
| style="list-style-type:_value_" | square | Black Small Square Boxes |
| style="list-style-type:_value_" | circle | Black Small Bordered Circles |
| style="list-style-type:_value_" | none | No Symbol |
Unordered List Type Examples
Below is an example of Html Unordered List Types.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>HTML - Unordered Lists</h1>
<hr>
<!--Unordered List Types-->
<!--Disc Type Unordered List -->
<h3>Disc</h3>
<br>
<ul style="list-style-type: disc;">
<li>This is item One</li>
<li>This is item Two</li>
<li>This is item Three</li>
<li>This is item Four</li>
<li>This is item Five</li>
<li>This is item Six</li>
<li>This is item Seven</li>
</ul>
<hr>
<!--Circle Type Unordered List -->
<h3>Circle</h3>
<br>
<ul style="list-style-type: circle;">
<li>This is item One</li>
<li>This is item Two</li>
<li>This is item Three</li>
<li>This is item Four</li>
<li>This is item Five</li>
<li>This is item Six</li>
<li>This is item Seven</li>
</ul>
<hr>
<!--Square Type Unordered List -->
<h3>Square</h3>
<br>
<ul style="list-style-type: square;">
<li>This is item One</li>
<li>This is item Two</li>
<li>This is item Three</li>
<li>This is item Four</li>
<li>This is item Five</li>
<li>This is item Six</li>
<li>This is item Seven</li>
</ul>
<hr>
<!--None Type Unordered List -->
<h3>None</h3>
<br>
<ul style="list-style-type: None;">
<li>This is item One</li>
<li>This is item Two</li>
<li>This is item Three</li>
<li>This is item Four</li>
<li>This is item Five</li>
<li>This is item Six</li>
<li>This is item Seven</li>
</ul>
</body>
</html>
Nested/Sub Listing Of Unordered List
<!DOCTYPE html>
<html lang="en">
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>HTML - UnOrdered Lists</h1>
<hr>
<!--UnOrdered List Types-->
<!--Nested/Sub Listing of Unordered List-->
<ul style="list-style-type: disc;">
<li>This is item One</li>
<li>This is item Two</li>
<ul style="list-style-type: circle;">
<li>This is item Three</li>
<li>This is item Four</li>
<li>
<ul style="list-style-type: square;">
<li>This is item Five</li>
<li>This is item Six</li>
</ul>
</li>
</ul>
</ul>
</body>
</html>
Description List
The Description List is used as lists with descriptions about its items/terms. It defines a naming term for a list.
Below is an example of the Html Description List.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>HTML - Description Lists</h1>
<hr>
<!--Description List-->
<dl>
<dt>Black Color Cars</dt>
<dd>-Car Number 1</dd>
<dd>-Car Number 2</dd>
<dt>White Color CarS</dt>
<dd>-Car Number 3</dd>
<dd>-Car Number 4</dd>
</dl>
</body>
</html>
There are three basic elements of Description List:
- dl – For defining a Description List,
- dt – For naming a Description over a list element,
- dd – for list data after dt or description.
Example Of All Html Lists
<!DOCTYPE html>
<html lang="en">
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>HTML - Ordered Lists</h1>
<hr>
<!--Ordered List Types-->
<ol>
<li>This is item One</li>
<li>This is item Two</li>
<li>This is item Three</li>
<li>This is item Four</li>
<li>This is item Five</li>
</ol>
<hr>
<h1>HTML - UnOrdered Lists</h1>
<hr>
<!--UnOrdered List Types-->
<ul>
<li>This is item One</li>
<li>This is item Two</li>
</ul>
<hr>
<h1>HTML - Description Lists</h1>
<hr>
<!--Description List-->
<dl>
<dt>Black Color Cars</dt>
<dd>-Car Number 1</dd>
<dd>-Car Number 2</dd>
<dt>White Color CarS</dt>
<dd>-Car Number 3</dd>
<dd>-Car Number 4</dd>
</dl>
</body>
</html>