Tutorials

Learn web design and programming with our free video and text tutorials.

HTML/XHTML List Tutorials

How To Create an Un-ordered List

The starting <ul> tag and ending </ul> tag creates an un-ordered list in (X)HTML. The starting <li> and ending </li> tags are nested within the openning <ul> and closing </ul> tags and are used to define each list item within the list.

The HTML code below shows you how to create 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>

<ul>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>

</body>
</html>

The HTML code above makes the list below.

  • some text
  • some text
  • some text

How To Create Ordered Lists

The starting <ol> tag and ending </ol> tag creates an ordered list in (X)HTML. The starting <li> and ending </li> tags are nested within the openning <ol> and closing </ol> tags and are used to define each list item within the list.

The HTML code below shows you how to create 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>

<ol>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ol>

</body>
</html>

The HTML code above makes the list below.

  1. some text
  2. some text
  3. some text