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 create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
HTML Lists

Last accessed pages

  1. A Pig in a Poke (196)
  2. Logic Perspicacity Games (4721)
  3. Butterfly Kyodai (17106)
  4. Bubbles3 (25088)
  5. Zuma Honey (3507)

Popular pages this month

  1. Qwop (4286)
  2. Bubbles3 (3791)
  3. Butterfly Kyodai (2698)
  4. Zuma Deluxe (2492)
  5. Backgammon (1288)