HTML List

A simple list division in the HTML document can be defined by a <ul> element or a <ol> element. An unordered list is created and enclosed by open tag <ul> and end tag </ul>. An ordered list is created and enclosed by open tag <ol> and end tag <ol>.

A more complex definition list division in the HTML document can also be defined by a <dl> element. A definition list is created and enclosed by open tag <dl> and end tag </dl>.

Besides, there are also two deprecated elements, <dir> and <menu> to define directory listing and menu listing. An directory list is created and enclosed by open tag <dir> and end tag </dir>. An menu list is created and enclosed by open tag <menu> and end tag </menu>.

List item <li> in unordered list <ul> and ordered list <ol>

A nested <li> element is used to define a list item in the list. The list content is held between the open tag <li> and the optional end tag </li>. List items are rendered as bulleted items in a unordered list <ul>. And list items are rendered as numbered items in a ordered list.

Code Sample of unordered list division:

<ul>
<li>
first list item
</li>
<li>
second list item
</li>
<li>
third list item
</li>
</ul>

HTML web page:

first list item
second list item
third list item

Code Sample of ordered list division:

<ol>
<li>
first list item
</li>
<li>
second list item
</li>
<li>
third list item
</li>
</ol>

HTML web page:

first list item
second list item
third list item

List of term <dt> and definition <dd> in definition list <dl>

A nested <dt> element is first used to define the "term" of a list item in the list. The "term" is held between the open tag <dt> and the optional end tag </dt>. Then a nested <dd> element is used to define the "description" of a list item in the list. The "description" is held between the open tag <dt> and the optional end tag </dt>.
The "term" of the definition list items are rendered in a left column of the definition list. And the "description" of the definition items are rendered in a right column of the definition list with a wider left indent. Besides the text content of <dt> element is restricted to inline content. While the text content of <dd> element can be block-level content.

Code Sample of list of term <dt> and definition <dd> in definition list <dl>:

<dl>
<dt>
first term
</dt>
<dd>
first term description 1
</dd>
<dt>
second term
</dt>
<dd>
second term description 1
</dd>
<dd>
second term description 2
</dd>
<dt>
third term 1
</dt>
<dt>
third term 2
</dt>
<dd>
third description
</dd>
</dl>

HTML web page:

first term: first term description 1
second term: second term description 1; second term description 2
third term 1
third term 2: third description

List item <li> in directory list <dir> and menu list <menu>

The <dir> element and <menu> element are deprecated elements
A nested <li> element is also used to define a list item in the directory list <dir> and menu list <menu>. The list content is held between the open tag <li> and the optional end tag </li>. List items in directory list <dir> and menu list <menu> are rendered as bulleted items as in a unordered list <ul>.

Code Sample of directory list division:

<dir>
<li>
first directory item
</li>
<li>
second directory item
</li>
<li>
third directory item
</li>
</dir>

HTML web page:

first directory item
second directory item
third directory item

Code Sample of menu list division:

<menu>
<li>
first menu item
</li>
<li>
second menu item
</li>
<li>
third menu item
</li>
</menu>

HTML web page:

first menu item
second menu item
third menu item

Nested list

Different types of list can be nested together. The nested list is enclosed inside the corresponding list item element.

Code Sample of directory list division:

<dl>
<dt>
Nested List
</dt>
<dd>
A list inside a list
</dd>
<dt>
Nested List Example 1
</dt>
<dd>
<ol>
<li>
first list item
</li>
<li>
second directory item
</li>
<li>
third directory item
</li>
</ol>
</dd>
<dt>
Nested List Example 2
</dt>
<dd>
<ul>
<li>
first level list item 1
<ol>
<li>
second level list item 1
</li>
<li>
second level list item 2
</li>
<li>
second level list item 3
</li>
</ol>
</li>
<li>
first level list item 2
</li>
<li>
first level list item 3
</li>
</ul>
</dd>
</dl>

HTML web page:

Nested List

A list inside a list

Nested List Example 1

first list item
second directory item
third directory item

Nested List Example 2

first level list item 1
1. second level list item 1
2. second level list item 2
3. second level list item 3
first level list item 2
first level list item 3

Content

HTML List

List item <li> in unordered list <ul> and ordered list <ol>

List of term <dt> and definition <dd> in definition list <dl>

List item <li> in directory list <dir> and menu list <menu>

Nested list