# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://certil-remy.gitbook.io/learn/html-1/untitled-8.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.