# HTML Lists

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FKW94g39lphLGXoWXeVU1%2Fimage.png?alt=media&#x26;token=ff45e637-3917-4a7c-9669-67bf439cfff4" 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
