The moment it's necessary to group elements we can turn to lists. If the components can fit in a chaotic order, where their placement isn't important, we call it an unordered list (list of ingredients, tasks, movies watched, archenemies...). And when a harmony is needed it's called an ordered list (steps for a cooking recipe, priorities, winners...).

Unordered

Each element inside it will need the <li> tag.

An example of its structure.

<ul>
    <li>Oil</li>
    <li>Flour</li>
    <li>Jam</li>
</ul>

Ordered

An example of its structure.

<ol>
    <li>Preheat oven</li>
    <li>Mix the Flour with water</li>
    <li>Let it rest</li>
</ol>

The result will be the following.

If we wanted to change to descending order.

<ol reversed>
    <li>Preheat oven</li>
    <li>Mix the Flour with water</li>
    <li>Let it rest</li>
</ol>

Indicate the number it will start at.

<ol start="8">
    <li>Preheat oven</li>
    <li>Mix the Flour with water</li>
    <li>Let it rest</li>
</ol>

Or indicate what type of numbering. For example roman numerals.

<ol type="I">
    <li>Preheat oven</li>
    <li>Mix the Flour with water</li>
    <li>Let it rest</li>
</ol>

Sublists

To achieve elements in a hierarchy, one inside another, we must repeat the previous structure between the appropriate <li> tags.

<ol>
    <li>Preheat oven</li>
    <li>Mix the Flour with water</li>
    <ul>
        <li>Let's not forget to stir well</li>
        <li> Watch out for lumps</li>
    </ul>
    <li>Let it rest</li>
</ol>

They can be mixed in all possible combinations.

<ul>
    <li>Oil</li>
    <li>Flour</li>
    <li>Jam</li>
    <ul>
        <li>Strawberry</li>
        <li>Plum</li>
    </ul>
</ul>

<ul>
    <li>Oil</li>
    <li>Flour</li>
    <li>Jam</li>
    <ul>
        <li>Strawberry</li>
        <ul>
            <li>Large</li>
            <li>Small</li>
        </ul>
        <li>Plum</li>
    </ul>
</ul>

Navigation menu

To create a set of ordered hyperlinks that can be used to navigate the site we must follow a fixed structure (which is a standard nowadays). The <nav> tag, inside it an unordered list which in turn contains hyperlinks in each element.

Later we'll discover the tags called Sectioning content; for now we'll declare it to indicate where our menu is located.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Shall we talk?</a></li>
  </ul>
</nav>

Definition lists

Represents a list of terms with their corresponding definition.

We'll need 3 tags.

<h1>Extinct animals</h1>

<dl>
    <dt>Smooth handfish</dt>
    <dd>The red handfish is a close relative.</dd>
    <dt>The Tasmanian wolf</dt>
    <dd>They were fierce but shy animals that fed on rodents and kangaroos and were hunted to extinction by humans.</dd>
    <dt>The passenger pigeon</dt>
    <dd>The most abundant species in the Americas a century ago. None remain.</dd>
</dl>