Introduction to Lists

Henna Singh
2 min readMar 3, 2022
#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 …👋

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Henna Singh
Henna Singh

Written by Henna Singh

Technical Speaker and an aspiring writer with avid addiction to gadgets, meet-up groups, and paper crafts. Currently doing Full Stack Diploma at Code Institute

No responses yet

Write a response