In HTML you can create three different types of lists: unordered (UL), ordered (OL) and definition (DL) lists.
These HTML lists are block-level elements.

Unordered Lists

An unordered list (also called "bulleted list") starts with a <ul> tag and ends with a </ul> tag.
Within the list, each item starts with an <li> tag and ends with an </li> tag.
The list items are marked with bullets. You can set three different types of bullets: disc, circle, and square. They are added with the type attribute within <ul> tag.
- "disc" is the default bullet type, so you don't need to specify it.

Example:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<ul>
 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQL</li>
</ul><br />

With "circle" type:
<ul type="circle">
 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQL</li>
</ul><br />

With "square" type:
<ul type="square">
 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQL</li>
</ul>

</body>
</html>
This code will display:

With "circle" type:
With "square" type:

Ordered Lists

An ordered list (also called "numbered list") is a block element that begins with an <ol> tag and ends with an </ol>.
Within the list, each item starts with an <li> tag and ends with an </li>.
The default type of numbered list uses standard numbers.
You can specify different types of numbering by adding the "type" attribute to the <ol> tag, as described in the following list:
- By default, HTML starts each numbered list with 1 or the equivalent in the numbering scheme used (i, I , a , A).
To change the starting number, add the start attribute to the <ol> tag, and specify the appropriate number.
            Ex.:     <ol start="4">

In the next example there are three ordered lists, with different types:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<ol>
 <li>HTML lessons</li>
 <li>Ajax tutorials</li>
 <li>JavaScript course</li>
</ol><br />

With "I" type:
<ol type="I">
 <li>HTML lessons</li>
 <li>Ajax tutorials</li>
 <li>JavaScript course</li>
</ol><br />

With "a" type and start="3":
<ol type="a" start="3">
 <li>HTML lessons</li>
 <li>Ajax tutorials</li>
 <li>JavaScript course</li>
</ol>

</body>
</html>
This code will display:
  1. HTML lessons
  2. Ajax tutorials
  3. JavaScript course

With "I" type:
  1. HTML lessons
  2. Ajax tutorials
  3. JavaScript course

With "a" type and start="3":
  1. HTML lessons
  2. Ajax tutorials
  3. JavaScript course

• The <li> tag is a block-level element, you can add within it <p>, <div>, <ul>, or other block-level elements.
Example: <li> with paragraph, and nested list:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<ol>
 <li><p>Here is a paragraph<br />
 A new line in the paragraph.</p></li>
 <li>HTML lessons:
  <ul type="square">
   <li>Adding images</li>
   <li>DIV and SPAN</li>
  </ul>
 </li>
 <li>Another list item</li>
</ol>

</body>
</html>
This code will display:
  1. Here is a paragraph
    A new line in the paragraph.

  2. HTML lessons:
    • Adding images
    • DIV and SPAN
  3. Another list item

Definition Lists

A definition list is a list of items, with a description of each item. It begins with a <dl> tag and ends with a </dl>.
The <dl> tag is used in conjunction with <dt> and <dd>.
Within the <dl>, each of the terms defined begins with a <dt> tag and ends with a </dt>.
Within the <dl>, each of the definitions for those terms begins with a <dd> tag and ends with a </dd>.

Example:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
 <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dd>style sheet language used with HTML</dd>
</dl>

</body>
</html>
This code will display:
HTML
- Hyper Text Markup Language
- Language for web pages
CSS
Cascading Style Sheets
style sheet language used with HTML

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
HTML Lists

Last accessed pages

  1. Ajax-PHP File Manager (3571)
  2. Area and Perimeter Calculator for 2D shapes (5794)
  3. Super Mario Crossover (506)
  4. Flash Games - Free online Games (13206)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (54372)

Popular pages this month

  1. Bubbles3 (3136)
  2. Butterfly Kyodai (2748)
  3. Zuma Deluxe (2025)
  4. Qwop (1252)
  5. Backgammon (1197)