Lists

HTML Elements

	Element	Description
Ordered List	<ol>	It uses <li> for each list item in the list. It is used when the order of the list items is important. Ranking of things, steps to do something, etc... Attributes: start, reversed
Unordered List	<ul>	It uses <li> for each list item in the list. It is used when the order of the list items does not matter.
List Item	<li>	This a list item, used by ordered and unordered lists.
Description List	<dl>	It uses <dt> for the term that is being described/defined It uses <dd> for the description/definition
Term	<dt>	This is a term that is being described.
Description	<dd>	This is description of the term. It is indented.

Ordered Lists Back to top

Ordered lists should be used when you want to make a list of items where the order is important. These lists have numbers/letters as bullet points for each list item.

<ol>
    <li>wake up</li>
    <li>brush teeth</li>
    <li>get dressed</li>
    <li>take bus</li>
</ol>

Control Starting Number

You can use the start attribute to control what bullet number the list starts with.

<ol start="5">
    <li>wake up</li>
    <li>brush teeth</li>
    <li>get dressed</li>
    <li>take bus</li>
</ol>

Reverse Order

You can use the reversed attribute have the list count down instead of count up.

<ol reversed>
    <li>Defcon</li>
    <li>Defcon</li>
    <li>Defcon</li>
    <li>Defcon</li>
    <li>Defcon</li>
</ol>

Unordered Lists Back to top

Unordered lists are used when the order of the list items does not matter. These lists have bullet symbols for each list item (disc, circle, square).

<ul>
    <li>Minecraft</li>
    <li>Fortnite</li>
    <li>League of Legends</li>
    <li>Pac-man</li>
</ul>

Nested Lists

You can nest lists inside each other. If you don't do this right, it can become complicated fast.

It's easy of you do the following:

To nest a list inside another list, place an entire list inside the <li></li>
Tab out elements that are inside elements. This will make it easy to see what is nested in what.

<ul>
    <li>mammals
      <ul>
        <li>bears</li>
        <li>deer</li>
        <li>wolves</li>
      </ul>
    </li>
    <li>birds
      <ul>
        <li>eagles</li>
        <li>flamingos</li>
        <li>penguins</li>
      </ul>
    </li>
    <li>reptiles
      <ul>
        <li>frogs</li>
        <li>snakes</li>
      </ul>
    </li>
</ul>

You can keep on nesting lists forever. Each new level has a different bullet symbol.

In this example, we have a list of mammals, birds and reptiles. Inside the mammals list item, we have a list of bears, deer and wolves. Inside the bears list item, we have a list of black, brown, grizzly and polar.

<ul>
    <li>mammals
      <ul>
        <li>bears
          <ul>
            <li>black</li>
            <li>brown</li>
            <li>grizzly</li>
            <li>polar</li>
          </ul>
        </li>
        <li>deer</li>
        <li>wolves</li>
      </ul>
    </li>
    <li>birds
      <ul>
        <li>eagles</li>
        <li>flamingos</li>
        <li>penguins</li>
      </ul>
    </li>
    <li>reptiles
      <ul>
        <li>frogs</li>
        <li>snakes</li>
      </ul>
    </li>
</ul>

You can mix ordered and unordered lists inside the same nested list

<ul>
    <li>mammals
      <ol>
        <li>bears</li>
        <li>deer</li>
        <li>wolves</li>
      </ol>
    </li>
    <li>birds
      <ol>
        <li>eagles</li>
        <li>flamingos</li>
        <li>penguins</li>
      </ol>
    </li>
    <li>reptiles
      <ol>
        <li>frogs</li>
        <li>snakes</li>
      </ol>
    </li>
</ul>

Description Lists Back to top

Description lists are used for defining things. There are terms, the <dt> elements, and definitions/descriptions, the <dd> elements.

They aren't used as often as ordered or unordered lists.

<dl>
    <dt>application</dt>
    <dd>software that is used for business or entertainment</dd>
    <dt>web browser</dt>
    <dd>software used to access the internet and display web pages</dd>
</dl>