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

# HTML Lists

<figure><img src="/files/mKrYhBF90PKbuoL0h9mq" alt=""><figcaption></figcaption></figure>

### Unordered HTML List

An unordered list starts with the `<ul>` tag. Each list item starts with the `<li>` tag.

The list items will be marked with bullets (small black circles) by default:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
```

{% endcode %}

### Ordered HTML List

An ordered list starts with the `<ol>` tag. Each list item starts with the `<li>` tag.

The list items will be marked with numbers by default:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
```

{% endcode %}

### HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The `<dl>` tag defines the description list, the `<dt>` tag defines the term (name), and the `<dd>` tag describes each term:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
```

{% endcode %}

### HTML Unordered Lists

The HTML `<ul>` tag defines an unordered (bulleted) list.

### Unordered HTML List

An unordered list starts with the `<ul>` tag. Each list item starts with the `<li>` tag.

The list items will be marked with bullets (small black circles) by default:

{% code overflow="wrap" lineNumbers="true" %}

```html
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
```

{% endcode %}

### Unordered HTML List - Choose List Item Marker

The CSS `list-style-type` property is used to define the style of the list item marker. It can have one of the following values:

| Value  | Description                                     |
| ------ | ----------------------------------------------- |
| disc   | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle           |
| square | Sets the list item marker to a square           |
| none   | The list items will not be marked               |

{% code overflow="wrap" lineNumbers="true" %}

```html
<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<!-- Nested HTML Lists -->

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
```

{% endcode %}

### Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

{% code overflow="wrap" lineNumbers="true" %}

```html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
```

{% endcode %}

### Summary

* Use the HTML `<ul>` element to define an unordered list
* Use the CSS `list-style-type` property to define the list item marker
* Use the HTML `<li>` element to define a list item
* Lists can be nested
* List items can contain other HTML elements
* Use the CSS property `float:left` to display a list horizontally

### Ordered HTML List

An ordered list starts with the `<ol>` tag. Each list item starts with the `<li>` tag.

The list items will be marked with numbers by default:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
```

{% endcode %}

### Ordered HTML List - The Type Attribute

The `type` attribute of the `<ol>` tag, defines the type of the list item marker:

| Type     | Description                                                  |
| -------- | ------------------------------------------------------------ |
| type="1" | The list items will be numbered with numbers (default)       |
| type="A" | The list items will be numbered with uppercase letters       |
| type="a" | The list items will be numbered with lowercase letters       |
| type="I" | The list items will be numbered with uppercase roman numbers |
| type="i" | The list items will be numbered with lowercase roman numbers |

<pre class="language-html" data-overflow="wrap" data-line-numbers><code class="lang-html"><strong>&#x3C;!-- Numbers -->
</strong><strong>&#x3C;ol type="1">
</strong>  &#x3C;li>Coffee&#x3C;/li>
  &#x3C;li>Tea&#x3C;/li>
  &#x3C;li>Milk&#x3C;/li>
&#x3C;/ol>

&#x3C;!-- Uppercase Letters -->
&#x3C;ol type="A">
  &#x3C;li>Coffee&#x3C;/li>
  &#x3C;li>Tea&#x3C;/li>
  &#x3C;li>Milk&#x3C;/li>
&#x3C;/ol>

&#x3C;!-- Lowercase Letters -->
&#x3C;ol type="a">
  &#x3C;li>Coffee&#x3C;/li>
  &#x3C;li>Tea&#x3C;/li>
  &#x3C;li>Milk&#x3C;/li>
&#x3C;/ol>

&#x3C;!-- Uppercase Roman Numbers -->
&#x3C;ol type="I">
  &#x3C;li>Coffee&#x3C;/li>
  &#x3C;li>Tea&#x3C;/li>
  &#x3C;li>Milk&#x3C;/li>
&#x3C;/ol>

&#x3C;!-- Lowercase Roman Numbers -->
&#x3C;ol type="i">
  &#x3C;li>Coffee&#x3C;/li>
  &#x3C;li>Tea&#x3C;/li>
  &#x3C;li>Milk&#x3C;/li>
&#x3C;/ol>
</code></pre>

### Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the `start` attribute

{% code overflow="wrap" lineNumbers="true" %}

```markup
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
```

{% endcode %}

### Nested HTML Lists

Lists can be nested (list inside list):

{% code overflow="wrap" lineNumbers="true" %}

```markup
<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>
```

{% endcode %}

### Summary

* Use the HTML `<ol>` element to define an ordered list
* Use the HTML `type` attribute to define the numbering type
* Use the HTML `<li>` element to define a list item
* Lists can be nested
* List items can contain other HTML elements

### HTML Description Lists

A description list is a list of terms, with a description of each term.

The [`<dl>`](https://www.w3schools.com/tags/tag_dl.asp) tag defines the description list, the [`<dt>`](https://www.w3schools.com/tags/tag_dt.asp) tag defines the term (name), and the [`<dd>`](https://www.w3schools.com/tags/tag_dd.asp) tag describes each term:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
```

{% endcode %}

### Summary

* Use the HTML `<dl>` element to define a description list
* Use the HTML `<dt>` element to define the description term
* Use the HTML `<dd>` element to describe the term in a description list


---

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

```
GET https://codingzonebd.gitbook.io/html-elements/html-lists.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.
