HTML5 - ordered, marker and definition lists, details

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:

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

The result of the code snippet is:

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:

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

The result of the code snippet is:

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:

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

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:

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

The result of the code snippet is:

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:

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

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

What Lies Ahead

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