HTML XHTML List Code Tutorial

There are 3 types of lists supported in HTML: ordered, un-ordered and definition

The HTML code for ordered lists and un-ordered lists is very similar. The <ul> tag is used to define un-ordered lists and the <ol> tag is used to define ordered lists. The <li> tag is used to define each listed item.

Un-ordered lists

The HTML code example below shows you how to make an un-ordered list.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>
</head>
<body>
<ul>
<li>CSS</li>
<li>HTML</li>
<li>Tutorial</li>
</ul>
</body>
</html>

The HTML code produces the example below:

Create an un-ordered HTML list yourself. Enter the HTML code to create an un-ordered list in the textbox below.

Ordered lists

The HTML code example below shows you how to make an ordered list.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>
</head>
<body>
<ol>
<li>CSS</li>
<li>HTML</li>
<li>Tutorial</li>
</ol>
</body>
</html>

The HTML code produces the example below:

  1. CSS
  2. HTML
  3. Tutorial

Create an ordered HTML list yourself. Enter the HTML code to create an ordered list in the textbox below.

Definition lists

The HTML code example below shows you how to make a definition list.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>hyper text markup language</dd>
<dt>CSS</dt>
<dd>cascading style sheets</dd>
</dl>
</body>
</html>

The HTML code produces the example below:

HTML
hyper text markup language
CSS
cascading style sheets

Create a HTML definition list yourself. Enter the HTML code to create a definition list in the textbox below.