HTML, Lists

In this lesson we will see how, through special tags, it is possible to create numbered or bulleted text lists.

In this lesson we will see how, through special tags, it is possible to create numbered or bulleted text lists.
Let’s now see, in a brief example, the difference between a bulleted and a numbered list:

Bulleted list:
• First text
• Second text
• Third text

Numbered list:
1. First text
2. Second text
3. Third text
Having made this premise, let’s see how to create our lists.
Lists are divided into Ordered Lists and Unordered Lists.
Ordered lists are distinguished by a numbered list, so we can say that numbered lists are ordered lists.
On the contrary, bulleted lists are defined as unordered lists.

Ordered Lists (Numbered):
to create this type of list, the tag ol (Order list) is used, which precisely indicates to the browser that it is an ordered list, in addition to the tag li  (List item) which represents the list item.

Here then is the syntax for an ordered list:

Unordered lists (Bulleted lists):
unlike the previous one, this list is not characterized by a defined and ordered numbering, but only by a bullet point.
In this case, instead of ol, ul (Unordered list) is used, always paired with the li tag, as this is also a list.

Here is the syntax for creating this list:

Notice the list bullet. If we want to replace the classic bullet point to define the list with a small circle, we will use the type attribute combined with the type of point, which in our case becomes a circle defined with ‘circle’.
So here is our bulleted list using a circle:

If we then want a square as punctuation, we use the definition ‘square’:

Lists will be very useful for defining lists and navigation menus.

Pubblicato in HTML & CSS