List Tags

When writing any document, lists provide quick bursts of information in the most efficient manner. HTML Lists are no different when used in an HTML document. In a browser, there are only two types of lists, ordered and unordered. Ordered lists obviously have a predictable layout such as numbers or roman numerals. The standard for ordered lists is numbers, but you can always modify that in the CSS. Unordered lists are generally small black dots that can also be changed in the CSS. Lists require two sets of tags. The encapsulating tag is <ol> for ordered lists and <ul> for unordered lists. The element inside that tag is the <li> where your content will go in between the opening and closing tags of the that li element.

HTML Ordered Lists

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

HTML Unordered Lists

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

Pretty easy to understand there, but what if we wanted to have another level in the list? You can create lists inside lists. You would simply just start putting <ul> with internal <li> inside the previous <li> elements. Alright, maybe that is somewhat complicated… example please!

HTML Multiple Level Lists

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

References

• Official HTML List Documentation (w3)
• Lists in Detail (About)
• HTML Lists and Indents (HTMLGoodies)