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
