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 attribute is used in <img> tag for the address of the image?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which CSS code hides the element on page?
display: none; display: inline; position: relative;
#id {
  display: none;
}
What instruction stops the execution of a while() or for() statement?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicate the function that can create a constant.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
HTML Lists

Last accessed pages

  1. Ajax-PHP File Manager (3049)
  2. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (5229)
  3. Diamond shape with CSS (1286)
  4. Register and show online users and visitors (14198)
  5. Zuma Deluxe (20241)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (49620)
  2. Read Excel file data in PHP - PhpExcelReader (38033)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (36948)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (33324)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (30696)