HTML Elements

Lists

HTML provides us with two slighly different tags for creating lists: <ul> for unordered lists and <ol> for ordered lists. We can usually default to unordered lists and switch to ordered lists when the order of the list items matter.

We can nest lists as deep as we want, as long as we always be wrap the content in <li> tags (list items).

Code example: unordered

Copy
<ul>
    <li>The Lathe of Heaven</li>
    <li>Rocannon's World</li>
    <li>The Word for World is Forest</li>
</ul>

produces the unordered list below.

• The Lathe of Heaven
• Rocannon's World
• The Word for World is Forest

Code example: ordered

Copy
<ol>
    <li>Turn off the computer</li>
    <li>Go outside</li>
    <li>Contemplate the meaning of life</li>
</ol>

produces the ordered list below.

1. Turn off the computer
2. Go outside
3. Contemplate the meaning of life

Code example: nested

Copy
<ul>
    <li>Fantasy
        <ol>
            <li>The Eye of the World</li>
            <li>The Lies of Locke Lamora</li>
        </ol>
    </li>
    <li>Science fiction
        <ol>
            <li>Dune</li>
            <li>Ender's Game</li>
        </ol>
    </li>
    <li>Classics
        <ol>
            <li>Of Mice and Men</li>
            <li>Mockingbird</li>
        </ol>
    </li>
</ul>

produces the nested list below.

• Fantasy
  1. The Eye of the World
  2. The Lies of Locke Lamora
• Science fiction
  1. Dune
  2. Ender's Game
• Classics
  1. Of Mice and Men
  2. Mockingbird

<h3>Unordered list of food I like</h3>


<h3>Ordered list of my favorite movies</h3>