Lists in HTML

In this post, we’ll see another way to display content in a structured manner on our website. For this, we will use lists.

We’ll look at how to create lists and the different options available, as well as how they are used in today’s modern applications. In our example, as you can see in the video, we’ll make a salmon tartare recipe.

1 - Types of lists

There are three types of lists in HTML, 

1.1 - Unordered list

It contains items such as text, links or even images, and the main idea is to group them together but the order does not matter.

1.2 - Ordered list

The concept is similar to the previous one, but here the order of the list elements does matter.

1.3 - Descriptive lists.

In this case, the list will have two values, like a dictionary with “key” and “value”.

2 - Creating an unordered list

To create an unordered list, you must use the tag <ul> </ul> which will contain the list items, and each of these items is defined using the tag <li></li>

<h2>Ingredientes</h2>
<ul>
    <li>400g de salmón cortados en dados</li>
    <li>4 aguacates</li>
    <li>2 cebollas</li>
    <li>2 cucharadas de aceite de oliva virgen extra</li>
    <li>1 limon</li>
    <li>sal y pimienta</li>
    <li>Sesamo</li>
</ul>

As we know, we can change the indicator for a list; this is done in Word by choosing a bullet, an arrow, etc. This action can be performed either on the <ul> tag or on the <li> elements you want to modify. For this, we introduce a CSS property called list-style-type where we can specify values like disc for a solid dot, circle for a hollow circle, or square for a square. There is also the none option, which won’t show anything.

<style>
ul{
    list-style-type: square;
}
</style>

3 - Creating an ordered list

To create an ordered list, it’s similar to the previous case, but here we start the list with <ol></ol> and use <li></li> for its elements.

<h2>Instrucciones</h2>
<ol>
    <li>cortar el samlon y el aguacate en dados</li>
    <li>cortar las cebollas en tiras de medio centimetro</li>
    <li>Mezclar el aguacate con la cebolla y unas gotas de limon exprimido</li>
    <li>mezclar el salmon con la cebolla</li>
    <li>sal al gusto</li>
    <li>Montar por capas abajo el aguacate y arriba el salmon</li>
    <li>Servir</li>
</ol>

As in the previous example, here we can also change the element that indicates the list, and in this case, we use the type attribute.

There are multiple options, such as type="1" which displays numbers, type="a" which shows lowercase letters, type="A" uppercase letters, and finally type="I" for Roman numerals.

We also have the start attribute, which allows us to indicate the number at which this list will begin counting.

<ol type="1" start="20">
    ....
</ol>

4 - Creating a descriptive list.

As we mentioned before, a descriptive list contains two elements: a term and a description.

To create a descriptive list, use the tag <dl></dl>, and inside these tags use <dt> </dt> for the term you are going to explain, and <dd></dd> for its description.

<h3>Diferenciar buenos elementos</h3>
<dl>
    <dt>Aguacates</dt>
    <dd>para que un aguacate este bueno, debe estar maduro</dd>
    <dt>Salmon</dt>
    <dd>Si el salmon esta malo, estara azul</dd>
</dl>