Lists in Html

We will often be interested in presenting things in the form of lists, as they allow us to make enumerations of elements, using a numbering or not, also create definitions of terms

You can choose from three different types:

• Numbered lists

  serve to create a list with numbers

• Bulleted lists

  serve to create a list with symbols or bullets, are not numbered

• Lists of definitions

  are used to create term definitions, are not numbered, and can be used to simulate dictionaries

Numbered lists

Ordered lists are used to present things in a particular order

A correlative number for each item will automatically appear in the resulting list:

<ol start='3'>
    <li type='a'>Mammals</li>
        <li type='a'>Fish
            <ol>
                <li type='a'>Sardine</li>
                <li type='a'>Cod</li>
            </ol>
        </li>
        <li type='a' value='8'>Birds</li>
</ol>

In the example you can see that the ordered list starts with the item ol included inside the list of elements li

You have used the attribute type to specify what type of numbering we want to use:

• 1

  uses numeric values

• to

  use lowercase letters

• To

  use letters in uppercase

• i

  uses roman numerals in lowercase

• I

  uses roman numerals in uppercase

If not specified, the default is 1

You have used the attribute start to specify from which numbering begins, in this case it starts from the number 3

You have used the attribute value to specify a specific value for that element, in this case the number 8

In the example we can also see that lists with numbered can be nested

Remaining as a result:

3. Mammals
4. Fish
   1. Sardine
   2. Cod
8. Birds

Bulleted lists

Unordered lists are used to present things that, because they do not have a particular order, do not need to be preceded by a number

The resulting list automatically displays the symbol or bullet chosen with the attribute:

<ul>
    <li>Mammals</li>
        <li>Fish
            <ul>
                <li type='square'>Sardine</li>
                <li type='square'>Cod</li>
            </ul>
        </li>
        <li>Birds</li>
</ul>

In the example you can see that the ordered list starts with the item ul included inside the list of elements li

You have used the attribute type to specify what type of bullet we want to use:

• circle

  use a circle

• disc

  use a circle with the hollow interior

• square

  use a square

If not specified, the default is circle

In the example we can also observe that bulleted lists can be nested and in addition we have used different types of bullets to distinguish between them

Remaining as a result:

• Mammals
• Fish
  • Sardine
  • Cod
• Birds

Lists of definitions

Definition lists are appropriate for glossaries (or term definitions)

Thanks to this type of list, simple dictionaries can be built

<dl>
   <dt>Sardine
      <dd><p>Fish osteíctio of the order clupeiformes (Sardina pilchardus) in the Mediterranean sea and the Atlantic ocean</p>
<p>About 25 cm long, bluish green on the back, silvery on flanks and belly</p>
<p>Consumed fresh or canned</p></dd>
   </dt>
   <dt>Cod
      <dd>Marine fish osteíctio of the order gadiformes (Gadius callarias) which reaches over a meter in length</dd>
   </dt>
</dl>

In the example you can see that the list of definitions that begins with the element dl included inside the list of elements dt that represent the thing to define and the elements dd that represent the definition of the thing to define

The example has not been included, but we can also nest lists of definitions

Remaining as a result:

Sardine

Fish osteíctio of the order clupeiformes (Sardina pilchardus) in the Mediterranean sea and the Atlantic ocean

About 25 cm long, bluish green on the back, silvery on flanks and belly

Consumed fresh or canned

Cod

Marine fish osteíctio of the order gadiformes (Gadius callarias) which reaches over a meter in length