HTML Lists

HTML list helps us to display the information in the form of lists. There are the following three forms a list can be:

Ordered Lists
Unordered Lists
Description Lists

HTML Ordered List

HTML ordered list starts with the <OL> tag and each items starts with the <LI> tag. Here is an example of the ordered list:

codes
cracker
html
list
tutorial
examples

Example

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:

HTML Ordered List Type Attributes

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

HTML unordered list starts with the <UL> tag and each items starts with the <LI> tag. Here is an example of unordered list.

codes
cracker
html
list
tutorial
examples

The list items will be marked with bullets (small black circles) by default

Example

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:

HTML Unordered Lists Style Type Attributes

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

HTML Make Marker as Disc

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:

HTML Make Marker as Circle

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:

HTML Make Marker as Square

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:

HTML Remove Marker from List

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:

HTML Description Lists

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:

HTML Nested Lists

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:

HTML Create Horizontal Lists

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:

HTML Create Fancy or Interactive Horizontal Lists

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:

html create fancy interactive horizontal list

Here is the live demo output of the above fancy or interactive horizontal list example code.

HTML Online Test

Previous Page Next Page