Skip to main content

Lists

You may think lists are not a big deal. However, lists are how most all sets are tagged in a web page. Not only bulleted items and numbered steps, but also things like the list of options in the navigation bar. HTML includes three types of lists: ordered, unordered and description lists.

Ordered Lists​

Ordered lists are collections of items that have a set order. The entire list is enclosed in <ol> </ol> tags. Each item in the list is wrapped in <li> </li> tags. The lists is indented slightly and numbered as 1. 2. 3. .... by default. You can change the number style to letters or roman numbers with the type attribute.

Unordered Lists​

Collections of items in no particular order may be tagged as unordered lists and wrapped with the <ul></ul> tags. Each item in the list is wrapped in <li> </li> tags.

Description Lists​

Descriptions lists are for marking collections of a name with a description/definition pair. The entire list is enclosed in <dl> </dl> tags. Each set of name is tagged with <dt> </dt> tags (data term) and the corresponding description is tagged with <dd> </dd> tags ( data description ).

index.html
<ul>
    <li><a href="index.html">Home</a></li>
    <li>About Us</li>
    <li>Contact Us</li>
</ul>
list

Code Sandbox - Lists​

Modify the code below and see the live browser output:

Nested Lists

Note that the list item element can contain other HTML elements.