> For the complete documentation index, see [llms.txt](https://certil-remy.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://certil-remy.gitbook.io/learn/html-1/untitled-8.md).

# HTML Lists

## Objectives

* Learn the basics of HTML list elements

 [![](https://camo.githubusercontent.com/4e07713cdfb7ec9207ee14e03c33ebdca5b708e5/68747470733a2f2f692e696d67666c69702e636f6d2f32386d7063782e6a7067)](https://camo.githubusercontent.com/4e07713cdfb7ec9207ee14e03c33ebdca5b708e5/68747470733a2f2f692e696d67666c69702e636f6d2f32386d7063782e6a7067)

### `<ul>`, `<li>`

**Remember to use `httpserver` to live test your webpage**

In our `real-estate-listings.html` page, under the `<h4>2014</h4>` tag we added in the previous lesson, we should add some months in a list. In HTML, we can list things using the `<ul>` tag, which stands for *unordered list*, along with the `<li>` tag, *list item*.

To make a list, we write out the opening and closing `<ul>` tags, and inside them, we'll add `<li>` tags, each listing a single month:

```
<ul>
  <li>Dec</li>
  <li>Nov</li>
  <li>Oct</li>
</ul>
```

Lists are very flexible and we can even nest lists inside of lists. If we wanted to add specific dates to a month, we could put a list inside of our `Oct` list item:

```
<ul>
  <li>Dec</li>
  <li>Nov</li>
  <li>Oct
    <ul>
      <li>17th</li>
      <li>18th</li>
    </ul>
  </li>
</ul>
```

Save your file, start up `httpserver`, and on the browser tab where you've got the server displaying our webpage, add `/real-estate-listings.html` to the end of the URL path to see our Listings page. In the browser, we'll see that `ul` produces a bulleted list on the page, and will display nested lists indented further from the left.

### `<ol>`

The other type of list is the *ordered list*, which is written as `<ol>` instead of `<ul>`. Both use `<li>` tags inside, but this time, `<ol>` will display a numbered list instead of bullets:

```
<h3>Popular Listings</h3>
<ol>
  <li>348 Stockton St.</li>
  <li>3742 Belevadere Rd.</li>
  <li>41 Cleaton Ave.</li>
</ol>
```

Add the above to your Listings page, save and check out your live page to see the difference.

View [HTML Lists](https://learn.co/lessons/html-lists) on Learn.co and start learning to code for free.