HTML Lists

HTML lists are used to add bulleted lines of text in web page. There are three type of lists available in HTML.

<ul> : The unordered list will display items with plain bullets.
<ol> : The ordered list will display items with different schemes of numbers.
<dl> : The definition list will arrange items in the same way as they are arranged in a dictionary.

HTML Unordered List

The <ul> tag is used to define unordered list. Each list item is defined with the <li> tag.

Example

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

CSS list-style-type Property

The CSS list-style-type property is used to define the style of the list item marker.

Example

<ul style=”list-style-type:disc;”>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Following list item markers are available in <ul> tag.

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

HTML Ordered List

The <ol> tag is used to define ordered list. Each list item is defined with the <li> tag.

Example

<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

HTML Ordered List type Attribute

The type attribute of the <ol> tag is used to define the type of the list item marker.

Example

<ol type=”A”>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

Following list item markers are available in <ol> tag.

Type Description
type=”1″ The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers

HTML Definition Lists

The <dl> tag is used to define the Definition list. The <dt> tag is used to define the term, and the <dd> tag describes each term.

Example

<dl>
<dt><b>HTML</b></dt>
<dd>Hyper Text Markup Language</dd>
<dt><b>CSS</b></dt>
<dd>Cascading Style Sheets</dd>
</dl>