HTML5 - ordered, marker and definition lists, details
Tags: html, beginners, webdev
Published: 2023-09-19 14:10:47

In this article, we will learn about **lists** (ordered, marker, definition) and **details** that can be expanded in HTML.

Lists are very useful, not just for common lists (of markers or numbered) in texts, but in a navigation menu, list of cards, or other sets of elements.

## Ordered List

To create ordered lists, like those in Microsoft Word or other text editors, we can use the `ol` element with `li` elements. The `ol` element marks an ordered list, and the `li` element marks list items.

Below, you can see a code snippet:

```html
<ol>
    <li>Interstellar</li>
    <li>The Prestige</li>
    <li>Butterfly Effect</li>
</ol>
```

The result of the code snippet is:

![Ordered list rendered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yfmavmeuvhxqocrkpts.png)

## Unordered List

Another common type of list is the Unordered List or Marker List, which can be created using the `ul` element with `li` elements, similar to the Ordered List. This list type is often used to create navigation menus.

Below, you can see a code snippet:

```html
<nav>
    <ul>
        <li>Home</li>
        <li>Projects</li>
        <li>Contact</li>
     </ul>
</nav>
```

The result of the code snippet is:

![Unordered list rendered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p30stwy7a3zsiqsj0p2d.png)

## Definition List

In some wikis, reports, and academic documents, it is common to have terms and their definitions. To achieve this, you should use a definition list with `dl` (definition list), `dt` (definition term), and `dd` (definition description). The `dl` element marks a definition list, and for each combination of term and description, we use `dt` and `dd`.

Below, you can see a code snippet:

```html
<dl>
  <dt>HTML</dt>
  <dd>Markup language</dd>
  <dt>CSS</dt>
  <dd>Style language</dd>
  <dt>JavaScript</dt>
  <dd>Web programming language</dd>
</dl>
```

The result of the code snippet is:

![Definition list rendered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4u7gw9r7t1cshdvtgn47.png)

## Details

An incredible element is `details`. This element creates a collapsible block with a title and description. It is ideal for Frequently Asked Questions where the user can click on the question to see the answer.

This element uses three elements: `details` to mark the block, `summary` element for the details title, and any element, such as `p`, for the details description.

Below, you can see a code snippet:

```html
<details>
    <summary>What is Arthur's academic degree?</summary>
    <p>Master's in Computer Science.</p>
</details>
```

The result of the code snippet is:

![Details rendered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p63zmtlr0y9z3tvdt4r.png)

And, if you click on the element text "What is Arthur's academic degree?" the description will appear. You can see this result in the next image:

![Details rendered and opened](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36kt99bz8hhb851a2mgd.png)

But, it's possible to start the details element opened; you just need to add the `open` attribute, like in the example below.

```html
<details open>
    <summary>What technologies does Arthur have expertise in?</summary>
    <p>ReactJS, NextJS, TypeScript/JavaScript, React Native, Jest, React Testing Library, Python.</p>
</details>
```

The result of the code snippet is:

![Details rendered starts opened](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0if9y3j391i4auwp6kb.png)

## What Lies Ahead

In upcoming articles, you will delve into **tables**. Stay tuned!