Introduction to Lists

#BuildTogether Day 25/100

Today was a Visa Appointment day which is both fun and not fun because visas are expensive :P but I am soooo happy I am going to be traveling again …👣

Today, I am back on HTML. I think a little diversion helps in the retention of concepts :)

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 Lists

As the name suggests, the items are arranged in numerical order. If one or more items are deleted, the others are automatically reset. For eg.

Some 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).

• Starting value: assign the number of 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.

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

Attributes can also be combined

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

Unordered List

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

Definition List

when a displaying object involves several definitions, it is best denoted by 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.

Tag name <dl> means description list, <dt> — description term, and <dd> — description definition.

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!

This was a short and easy topic for a long day I had. Until we meet tomorrow …👋