Web_Dev_Grad

Lists are very important in HTML and, although they may not look like it, many navigation bars in websites are actually lists. Lists can be broken down into two main types; unordered lists (ul) and ordered lists (ol). Unordered lists are just bullet points, whereas ordered lists are numbered. Nested inside these are list item <li></li> elements that make up the rest of the list.

<ul>
    <li>First item in an unordered list</li>
    <li>Second item in an unordered list</li>
</ul>
<ol>
    <li>First item in an ordered list</li>
    <li>Second item in an ordered list</li>
</ol>

Along with unordered and ordered lists, there are also description lists <dl></dl> that has a pair Description Terms <dt></dt> and Description Data <dd></dd> instead of list items <li></li>. This works very well for things like glossaries or even FAQs if you were to set the questions as the Description Term and answers as Description Data. Description lists do not have bullet points or numbers associated with them.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language: the standard language for creating web pages.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets: used for styling HTML documents.</dd>
</dl>

Lists can be nested within lists to create sub categories. This is very easily done, you just need to create a new <ul></ul> or <ol></ol> within the list item element <li></li> of a list. Remember to indent each the nested lists so that the children are always 1 tab in from the parent.

<ul>
    <li>First item in a list</li>
    <li>Second item in a list
        <ol>
            <li>First item in a nested list</li>
            <li>Second item in a nested list</li>
        </ol>
    </li>
    <li>Third item in a list</li>
</ul>