Intro to Lists

Lists are a big part of HTML. We often use them in real life and see them on web pages a lot. A list is a sequence of connected items: it can be a list of products, invited guests, machine parts, and so on. Instructions on how to do or make something usually come in the form of a list, too. In other words, lists are a typical part of our life, yet there’s still a lot you can learn about them in the context of HTML.

In HTML, there are 3 types of lists. Choosing a specific type depends on what sort of information you’re working with and how you want to present it.

Ordered list

This type of list consists of items arrayed in numerical order. If one or more of these items gets deleted, others will be reset automatically. To create an ordered list, use a paired tag <ol></ol>. Start every item with <li> and close with </li>.

Let’s take a look at the following code:

<ol>
  <li>Facebook</li>
  <li>Twitter</li>
  <li>Instagram</li>
  <li>Snapchat</li>
</ol>

It turns into a list like this one:

There are also several attributes that can be applied to ordered lists:

Type is an especially important attribute for ordered lists because it determines numeration.

1 — default, decimal numeration (1, 2, 3, 4...).
A — by alphabetical order, capital letters (A, B, C, D...).
a — by alphabetical order, lowercase letters (a, b, c, d...).
I — by Roman numerals (I, II, III, IV).

Example:

<ol type="a"></ol>
a. First
b. Second
c. Third

Starting value: assign the number of a starting value.

For example, if we want to assign a number 5 to some item, we have to write <li value="5"></li>, and the enumeration will continue according to that.

Reversed sets the list in inverse order.

See the following example:

<ol reversed></ol>
10, 9, 8…

You can combine these attributes, for example, like this:

<ol type="A" start="3" reversed></ol>
C. First
B. Second
A. Third

The start attribute sets the number from which the list will start.

Unordered List

This type of list is different in that it doesn’t use numbers or letters, yet there are markers: disks (it is the default value), circles, squares, or none (nothing).

Let’s look at a simple example:

<ul type="circle"></ul>

To create an unordered list, use a paired tag <ul></ul>. Start every item with <li> and close with </li>:

<ul>
  <li>Facebook</li>
  <li>Twitter</li>
  <li>Instagram</li>
  <li>Snapchat</li>
</ul>

Here is the resulting list:

Definition List

When it is necessary to give several definitions to one object, opt for a definition list.

It is made with a paired tag <dl></dl>. Use <dt></dt> for the main object and <dd></dd> for definition. Remember that the order is the term first and then the explanation.

Note that lists can also be nested. An obvious example of that would be a book’s contents page with chapters (1.) and subchapters (1.1 and then 1.1.1 or 1.2) nested within. It’s just like a list inside a list!

Take a look at this code:

<dl>
  <dt>Recipe:</dt>
    <dd>Omelet</dd>
  <dt>Ingredients:</dt>
    <dd>Eggs</dd>
    <dd>Milk</dd>
    <dd>Salt</dd>
</dl>

The result of it is:

Conclusion

So, now you know that there are 3 types of lists. Lists make information much more comprehensible, that is why it’s a good idea to get thoroughly acquainted with them and use them in your code.