HTML list helps us to display the information in the form of lists. There are the following three forms a list can be:
HTML ordered list starts with the <OL> tag and each items starts with the <LI> tag. Here is an example of the ordered list:
Here is an example of HTML lists, uses HTML ordered list:
<!DOCTYPE html> <html> <head> <title>HTML Lists Example</title> </head> <body> <ol> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ol> </body> </html>
Here is the sample output produced by the above HTML ordered list example code:
A type attribute can be added to an ordered list, to define the type of the marker. The table given here list and describes the list of marker types used in ordered list.
| Type | Description |
|---|---|
| type="1" | The list items will be numbered with numbers (default) |
| type="a" | The list items will be numbered with lowercase letters |
| type="A" | The list items will be numbered with uppercase letters |
| type="i" | The list items will be numbered with lowercase roman numbers |
| type="I" | The list items will be numbered with uppercase roman numbers |
Let's look at the following example (all in one) to make marker as of type 1, A, a, I, i.
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ol type="1"> <li>html</li> <li>list</li> </ol> <ol type="A"> <li>html</li> <li>list</li> </ol> <ol type="a"> <li>html</li> <li>list</li> </ol> <ol type="I"> <li>html</li> <li>list</li> </ol> <ol type="i"> <li>html</li> <li>list</li> </ol> </body> </html>
Below is the sample output of the above HTML list example code:
HTML unordered list starts with the <UL> tag and each items starts with the <LI> tag. Here is an example of unordered list.
The list items will be marked with bullets (small black circles) by default
Here is an example of HTML unordered list.
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
Following is the sample output of the above HTML unordered list example code:
A style attribute can be added to an unordered list, to define the style of the marker. The table given below list and describes attributes of the HTML unordered list style type.
| Style | Description |
|---|---|
| list-style-type:circle | The list items will be marked with circles |
| list-style-type:disc | The list items will be marked with bullets (default) |
| list-style-type:square | The list items will be marked with squares |
| list-style-type:none | The list items will not be marked |
Let's look at the following example to make marker as Disc:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul style="list-style-type:disc"> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
Since it is the default marker style, therefore you will watch the same output as of the above output:
Let's look at the following example to make marker as Circle:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul style="list-style-type:circle"> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
Here is the sample output of the above HTML make marker as circle example code:
Let's look at the following example to make marker as Square:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul style="list-style-type:square"> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
Here is the sample output of the above HTML make marker as square example code:
Let's look at the following example shows how to remove marker from the list:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul style="list-style-type:none"> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
It will display the following result:
A description list, is a list of terms, with a description of each term.
The <DL> tag defines a description list, the <DT> tag defines the term (name), and the <DD> tag defines the data (description).
Here is an example uses description list in HTML:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <dl> <dt>html</dt> <dd>hyper text markup language</dd> <dt>list</dt> <dd>organized, unorganized, description list</dd> </dl> </body> </html>
Here is the sample output of the above HTML description list example code:
You are free to nest one list to another, also called as nested list. Here is an example shows how to use nested list in an HTML document.
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul> <li>html <ul> <li>list <ul> <li>list tutorial</li> <li>list example</li> </ul> </li> <li>list tag <ul> <li>list tag tutorial</li> <li>list tag examples</li> </ul> </li> </ul> </li> </ul> </body> </html>
Here is the sample output produced by the above HTML Nested list example code:
You can also create horizontal list in HTML using CSS. Here is an example shows how to create horizontal list in HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML List Example</title>
<style>
ul li{display:inline;}
</style>
</head>
<body>
<ul>
<li>codes</li> -
<li>cracker</li> -
<li>html</li> -
<li>list</li> -
<li>tutorial</li> -
<li>examples</li>
</ul>
</body>
</html>
Below is the sample output of the above HTML horizontal list example code:
With a little extra style, you can make the lists more fancy and interactive. Here is an example shows how to create fancy or interactive horizontal list in HTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML List Example</title>
<style>
ul
{
padding: 0;
}
ul li
{
display: inline;
}
ul li a
{
background-color: red;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
line-height:50px;
}
ul li a:hover
{
background-color: white;
color:red;
}
</style>
</head>
<body>
<ul>
<li><a href="http://codescracker.com/html">HTML</a></li>
<li><a href="http://codescracker.com/js">JS</a></li>
<li><a href="http://codescracker.com/css">CSS</a></li>
<li><a href="http://codescracker.com/java">Java</a></li>
<li><a href="http://codescracker.com/c">C</a></li>
<li><a href="http://codescracker.com/cpp">CPP</a></li>
</ul>
</body>
</html>
Here is the sample output produced by the above HTML Fancy or Interactive Horizontal list example code:
Here is the live demo output of the above fancy or interactive horizontal list example code.
© Copyright 2021. All Rights Reserved.