Making Lists

A lot of real information naturally comes in lists: steps in a recipe, favorite movies, items on a to-do list. HTML has two list tags built exactly for this, and you will likely use them on almost every page you build.

Unordered lists

An unordered list is a list where order does not matter - just a set of bullet points. You create one with the <ul> tag (short for "unordered list"), and each individual item goes inside an <li> tag (short for "list item").

<ul>
<li>Hiking</li>
<li>Drawing</li>
<li>Reading mystery novels</li>
</ul>

Notice how the <li> tags live inside the <ul> tag - this is the "nesting" idea from earlier lessons. The browser will automatically show a bullet point in front of each item.

Ordered lists

When the order genuinely matters, like steps you must follow in sequence, use an ordered list instead. It works exactly the same way, except you use <ol> in place of <ul>, and the browser numbers the items automatically.

<ol>
<li>Crack two eggs into a bowl.</li>
<li>Whisk until smooth.</li>
<li>Pour into a hot pan.</li>
</ol>

You never have to type the numbers yourself - if you add or remove a step later, the numbering updates on its own.

Lists inside your own page

Lists are a great fit for a personal page. You might use an unordered list for your hobbies, or an ordered list for the steps someone should take to contact you. Here is a small example combining what you know so far:

<h2>My Favorite Hobbies</h2>
<ul>
<li>Photography</li>
<li>Cooking</li>
<li>Playing guitar</li>
</ul>

As you build your own site later in this course, think about which parts of your content are naturally a list. Chances are you will find at least one or two spots where a <ul> or <ol> fits perfectly.