> For the complete documentation index, see [llms.txt](https://irena-popova.gitbook.io/boost-your-css-skills/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irena-popova.gitbook.io/boost-your-css-skills/lists.md).

# Lists

Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. With a list for nearly everything, it’s easy to understand why they are also popular online.

When we want to use a list on a website, HTML provides three different types to choose from: unordered, ordered, and description lists. Choosing which type of list to use—or whether to use a list at all—comes down to the content and the most semantically appropriate option for displaying that content.

In addition to the three different types of lists available within HTML, there are multiple ways to style these lists with CSS. For example, we can choose what type of marker to use on a list. The marker could be square, round, numeric, alphabetical, or perhaps nonexistent. Also, we can decide if a list should be displayed vertically or horizontally. All of these choices play significant roles in the styling of our web pages.

### Unordered Lists <a href="#unorderd-lists" id="unorderd-lists"></a>

An unordered list is simply a list of related items whose order does not matter. Creating an unordered list in HTML is accomplished using the unordered list block-level element, `<ul>`. Each item within an unordered list is individually marked up using the list item element, `<li>`.

By default, most browsers add a vertical `margin` and left `padding` to the `<ul>` element and precede each `<li>` element with a solid dot. This solid dot is called the list item marker, and it can be changed using CSS.

```css
123456<ul>  <li>Orange</li>  <li>Green</li>  <li>Blue</li></ul>
```

### Ordered Lists <a href="#ordered-lists" id="ordered-lists"></a>

The ordered list element, `<ol>`, works very much like the unordered list element; individual list items are created in the same manner. The main difference between an ordered list and an unordered list is that with an ordered list, the order in which items are presented is important.

Because the order matters, instead of using a dot as the default list item marker, an ordered list uses numbers.

#### Start Attribute

The `start` attribute defines the number from which an ordered list should start. By default, ordered lists start at `1`. However, there may be cases where a list should start at `30` or another number. When we use the `start` attribute on the `<ol>` element, we can identify exactly which number an ordered list should begin counting from.

The `start` attribute accepts only integer values, even though ordered lists may use different numbering systems, such as roman numerals.

```
123456
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://irena-popova.gitbook.io/boost-your-css-skills/lists.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.