HTML List

HTML offers web developers three ways for defining lists of information in html. All html lists must include one or more list elements. Lists may include.

---

Types of list

There are three different types of list in html:

• Ordered List or Numbered List (ol)
• Unordered List or Bulleted List (ul)
• Description List or Definition List (dl)

Note: you can create the html list inside another list , that will be termed as nested List.

HTML Ordered List or Numbered List

In the ordered lists, all list items are marked with numbers via defaultly. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

Example

<ol> <li>first</li> <li>second</li> <li>Third</li> <li>fourth</li> </ol>

Output

1. first
2. second
3. third
4. fourth

---

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <u>> tag and list items start with the <li> tag.

Example

<ul> <li>w3</li> <li>code</li> <li>designer</li> </ul>

Output

• w3
• code
• designer

HTML Description List or Definition List

HTML Description list is the list style which supported by HTML and XHTML. Description list is also known as definition list where content are listed as a dictionary.

The definition list is very appropriate when user want to show glossary, terms list or another list of name or values.

The HTML definition list contains following three tags:

• <dl> : tag defines the start of the list.
• <dt> : tag defines a term.
• <dd> : tag defines the term definition (description).

Example

<dl> <dt>W3CodeDesigner</dt> <dd>-It is India's Largest Coding Site.</dd> <dt>HTML List</dt> <dd>-In this chapter you will learn how to make list in html.</dd> <dt>HTML Table</dt> <dd>-You can learn About html table in our previous Tutorial.</dd> </dl>

Output

W3CodeDesigner

-It is India's Largest Coding Site.

HTML List

-In this chapter you will learn how to make list in html.

HTML Table

-You can learn About html table in our previous Tutorial.

---

HTML Nested List

A list within another list is termed as nested list. If we want number list inside the bullet list then such type of list called as nested list.

There are an example of html nested list.

Example

<ul> <li>w3 <ol><li>W3 is world wide web</li></ol> </li> <li>code</li> <li>designer <ol><li>Designer designs code.</li></ol></li> </ul>

Output

• w3
  1. W3 is world wide web
• code
• designer
  1. Designer designs code.

---