HTML XHTML List Code Tutorials

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

How to create un-ordered lists

The 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>Web Development Tutorials.com</title>
</head>
<body>
<ul>
<li>
Web</li>
<li>
Development</li>
<li>
Tutorials.com</li>
</ul>

</body>
</html>

The code above creates the un-ordered list below.

How to create ordered lists

The 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>Web Development Tutorials.com</title>
</head>
<body>
<ol>
<li>
Web</li>
<li>
Development</li>
<li>
Tutorials.com</li>
</ol>

</body>
</html>

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

  1. Web
  2. Development
  3. Tutorials.com

How to create definition lists

The 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>Web Development Tutorials.com</title>
</head>
<body>
<dl>
<dt>
Web</dt>
<dd>
Development</dd>
<dt>
Tutorials.com</dt>
<dd>
list code tutorials</dd>
</dl>

</body>
</html>

The code above creates the definition below.

Web
Development
Tutorials.com
list code tutorial

Use the text editor below to practice what you have learned.

How to create an ordered number list

The code below shows you how to create an ordered number 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>Web Development Tutorials.com</title>
</head>
<body>
<ol>
<li>
Web</li>
<li>
Development</li>
<li>
Tutorials.com</li>
</ol>

</body>
</html>

The above code creates the ordered number list below.

  1. Web
  2. Development
  3. Tutorials.com

How to create an ordered uppercase letters list

The code below shows you how to create an ordered uppercase letters 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>Web Development Tutorials.com</title>
</head>
<body>
<ol type="A">
<li>Web</li>
<li>Development</li>
<li>Tutorials.com</li>
</ol>
</body>
</html>

The above code creates the ordered uppercase letters list below.

  1. Web
  2. Development
  3. Tutorials.com

How to create an ordered lowercase letters list

The code below shows you how to create an ordered lowercase letters 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>Web Development Tutorials.com</title>
</head>
<body>
<ol type="a">
<li>Web</li>
<li>Development</li>
<li>Tutorials.com</li>
</ol>
</body>
</html>

The above code creates the ordered lowercase letters list below.

  1. Web
  2. Development
  3. Tutorials.com

How to create an ordered uppercase Roman numbers list

The code below shows you how to create an ordered uppercase Roman numbers 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>Web Development Tutorials.com</title>
</head>
<body>
<ol type="I">
<li>Web</li>
<li>Development</li>
<li>Tutorials.com</li>
</ol>
</body>
</html>

The above code creates the ordered uppercase Roman numbers list below.

  1. Web
  2. Development
  3. Tutorials.com

How to create an ordered lowercase Roman numbers list

The code below shows you how to create an ordered lowercase Roman numbers 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>Web Development Tutorials.com</title>
</head>
<body>
<ol type="i">
<li>Web</li>
<li>Development</li>
<li>Tutorials.com</li>
</ol>
</body>
</html>

The above code creates the ordered lowercase Roman numbers list below.

  1. Web
  2. Development
  3. Tutorials.com

How to create an un-ordered disc bullets list

The code below shows you how to create an un-ordered disc bullets 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>Web Development Tutorials.com</title>
</head>
<body>
<ul type="disc">
<li>Web</li>
<li>Development</li>
<li>Tutorials.com</li>
</ul>
</body>
</html>

The above code creates the un-ordered disc bullets list below.

How to create an un-ordered circle bullets list

The code below shows you how to create an un-ordered circle bullets 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>Web Development Tutorials.com</title>
</head>
<body>
<ul type="circle">
<li>Web</li>
<li>Development</li>
<li>Tutorials.com</li>
</ul>
</body>
</html>

The above code creates the un-ordered circle bullets list below.

How to create an un-ordered square bullets list

The code below shows you how to create an un-ordered square bullets 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>Web Development Tutorials.com</title>
</head>
<body>
<ul type="square">
<li>Web</li>
<li>Development</li>
<li>Tutorials.com</li>
</ul>
</body>
</html>

The above code creates the un-ordered square bullets list below.