codescracker


html

HTML Lists

Previous Page Next Page

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

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

  1. codes
  2. cracker
  3. html
  4. list
  5. tutorial
  6. 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 lists

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 all ordered lists type

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.

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

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 circle style lists

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 circle styled lists

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 square styled lists

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 list without marker

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 description lists

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 nested lists

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 horizontal lists

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="https://codescracker.com/html">HTML</a></li>
	<li><a href="https://codescracker.com/js">JS</a></li>
	<li><a href="https://codescracker.com/css">CSS</a></li>
	<li><a href="https://codescracker.com/java">Java</a></li>
	<li><a href="https://codescracker.com/c">C</a></li>
	<li><a href="https://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

Latest 5 Posts by CodesCracker


Tools
Calculator

Quick Links
Signup - Login - Give Online Test



© Copyright . All Rights Reserved.

CodesCracker