HTML Lists

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:

HTML course
CSS Course
PHP - MySQL

With "circle" type:

HTML course
CSS Course
PHP - MySQL

With "square" type:

HTML course
CSS Course
PHP - MySQL

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:

type="1" - style: 1, 2, 3, ...
type="i" - style: i, ii, iii, iv, ...
type="I" - style: I, II, III, IV, ...
type="a" - style: a, b, c, ...
type="A" - style: A, B, C, ...

- 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:

HTML lessons
Ajax tutorials
JavaScript course

With "I" type:

HTML lessons
Ajax tutorials
JavaScript course

With "a" type and start="3":

HTML lessons
Ajax tutorials
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:

Here is a paragraph
A new line in the paragraph.
HTML lessons:
- Adding images
- DIV and SPAN
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?

<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

Html Course

Unordered Lists

Ordered Lists

Definition Lists

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month