HTML Lists

Collection of items and it is considered one of the best ways of representing information. Even in the lists are one of the most frequently used elements, whether for representing general content. HTML Lists are used to specify lists of information. There are three different types of HTML lists:

1. Ordered List (ol)
2. Unordered List (ul)
3. Description List (dl)

HTML Ordered List

All the list items are marked with numbers by default. The ordered list starts with <ol> tag and list items start with the <li> tag.

<ol>  
    <li>title 1</li>  
    <li>title 2</li>  
    <li>title 3</li>  
    <li>title 4</li>  
</ol>  

HTML Unordered List

All the list items are marked with bullets. The Unordered list starts with <ul> tag and list items start with the <li> tag.

<ul>  
    <li>title 1</li>  
    <li>title 2</li>  
    <li>title 3</li>  
    <li>title 4</li>  
</ul>  

HTML Description List

HTML Description list is also a list which is supported by HTML. It is also known as definition list where entries are listed like a dictionary.

The HTML definition list contains following three tags:

• <dl> Use to start of the list.
• <dt> Use for a term.
• <dd> Use the term definition or description.

<dl>  
    <dt>Title 1</dt>  
    <dd>- Write a paragraph regarding above topic.</dd>  

    <dt>Title 2</dt>  
    <dd>- Write a paragraph regarding above topic.</dd>  

    <dt>Title 3</dt>  
    <dd>- Write a paragraph regarding above topic.</dd>  
</dl>  

HTML Nested List

A list within another list is called as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list.

<ol>  
    <li>United State (US)  
        <ul>  
            <li>Los Angeles</li>
            <li>Chicago</li>
            <li>Phoenix</li> 
            <li>San Antonio</li> 
            <li>San Diego</li>  
        </ul>  
    </li>  
    <li>United Arab Emirates (UAE) 
        <ul>  
            <li>Abu Dhabi</li>  
            <li>Sharjah</li>  
            <li>Fujairah</li>  
        </ul>  
    </li>  
</ol>