HTML111 - HTML Lists

Hello Senior Devs!

It’s Henry Uzor again, still the reigning Young Engineer of the Month of April, 2023 from the Young Engineers Forum of Nigeria, Nigeria Society of Engineers, Ikeja Branch. Yeah I know, but please allow me to blow my trumpet just one more time.

Once again, I bring you my weekly newsletter on Frontend Development. In the previous two editions, I discussed HTML Tables, taking you through the different elements that are used when creating HTML Tables, such as the <caption>, <tr>, <th>, and the <td> elements. I also talked about the “rowspan” and the “colspan” attributes and showed you how to use these attributes. I went further to use CSS styles to add a bit of visual design to the HTML Tables. This week, I want us to talk about HTML Lists.

HTML Lists

In previous editions of this newsletter, you may have seen HTML Lists in action, but no discussion was held on this, so I think it is important we talk about it for a bit.

HTML Lists can be referred to as a tool web developers use to group a set of related items in lists. There are three types of lists in HTML and they are namely; Unordered Lists, Ordered Lists, and Definition Lists. Now let's talk about these three types of HTML Lists one after the other.

• Unordered Lists: This is a list of items that have no particular order or sequence. Each item is marked with bulleted points by default. In HTML, an unordered list is created with the <ul> tags. Each item in the list is represented with the <li> tags. Here is the basic syntax:

• Ordered Lists: This is a list of items that are in a particular order or sequence. Each item of the ordered list is numbered by default. In HTML, an ordered list is created with the <ol> tags. Each item in the list is represented with the <li> tags. Here is the basic syntax:

• Definition Lists: Also known as Description List, this is a list of items that consist of a term and a definition for the term. Each item of the definition list is neither numbered nor does it appear as bulleted points. In HTML, a definition list is created with the <dl> tags. The terms are embedded with the <dt> tags, and the definitions are embedded with the <dd> tags. Here is the basic syntax:

An important thing to note as well is that HTML Lists can also be nested inside one another to create more complex lists.

Before we go any further, let’s jump into our favourite code editor, the VS Code, and let’s see how what we’ve learned so far is coming up.

From the code above, you should pretty much understand what is going on in the code if you’ve been following most of what we’ve been discussing since the beginning of this newsletter some 11-13 weeks ago. The <h1> elements in these pictures above are just to serve as subheadings of the different types of HTML Lists we have. Lines 14 to 19 demonstrate how to create an “Unordered List” in HTML, lines 21 – 26 demonstrate how to create an “Ordered List” in HTML, and lines 28 – 38 demonstrate how to create a “Definition List”, while the last lines 40 – 49 demonstrate how to create nested lists. When we go live on a browser, you’ll have a result that looks pretty much like this:

You weren’t expecting any result different from this, were you? I hope not!

List Style Type

At this point, I’d like us to talk about the list-style-type property. In HTML, the list-style-type property is used to set the CSS style of the marker for a list item in either an “unordered” or “ordered” list. It can be applied to the <ul> and <ol> elements, as well as their <li> children. It basically unlocks the document bullet library and gives a web developer the power to choose from a variety of different bullet types.

Any of the following values can be used for the list-style-type property:

• “disc”: Creates a filled circle as the marker for unordered list items.
• “circle”: Creates an empty circle as the marker for unordered list items.
• “square”: Creates a square as the marker for unordered list items.
• “decimal”: Creates a decimal number as the marker for unordered list items.
• “lower-alpha”: Creates a lowercase alphabetic character as the marker for the list items.
• “upper-alpha”: Creates an uppercase alphabetic character as the marker for the list items.
• “lower-roman”: Creates a lowercase Roman numeral as the marker for the list items.
• “upper-roman”: Creates an uppercase Roman numeral as the marker for the list items.
• “none”: takes away the markings of the list items, thereby leaving the list items with no markings or bullet styles at all.

Note: The “decimal”, “lower-alpha”, “upper-alpha”, “lower-roman”, and “upper-roman” values create markings that can also be replicated using the <ol> element and the “type” attribute which will be discussed in a bit.

The default value for the list-style-type is the “disc” value and if a developer doesn’t declare a value for or state the property at all, then the “disc” value holds, especially for unordered list items. However, if a web developer desires to change this value, then it is important to use the list-style-type property and state desired property value.

Now let us see this in demonstration and the equivalent result on a browser:

You can very easily see the distinctions in the different results the different values of the “list-style-type” property gives.

The “Type” Attribute

When it comes to Ordered Lists, this type of HTML List accepts an attribute called the “type” attribute, and this attribute is used to specify the numbering type for an Ordered List. There are five possible values that can be assigned to the “type” attribute and they are as follows:

• type=“1” (default): The list items will be numbered using regular numerals. With or without assigning the “type” attribute, this is usually the default value of the “type” attribute.
• type=“A”: The list items will be numbered using uppercase letters (A, B, C, …).
• type=“a”: The list items will be numbered using lowercase letters (a, b, c, …).
• type=“I”: The list items will be numbered using uppercase Roman numerals (I, II, III, …).
• type=“i”: The list items will be numbered using lowercase Roman numerals (i, ii, iii, …).

Yeah! I know! Demonstrations right? Let's get to it then, shall we?

Control List Counting

The last thing I would like to talk about for this edition is Control List Counting. In HTML Listing, web developers can control the way the list is counted by using the “start”, “value”, and “reversed” attributes. By default, an ordered list will always start counting from the number “1”. So if you want to start counting from a specified number, set the value of an individual list item, or reverse the order of an Ordered List, then you need to understand how to use the Control List Counting system.

1. The “start” Attribute: This attribute allows you to specify the starting value of an Ordered List.
2. The “value” Attribute: This attribute allows you to set the value of an individual list item.
3. The “reversed” Attribute: This attribute allows you to reverse the order of an Ordered List.

The final demonstration for this week comes up as follows:

I think at this point, there is no more that needs to be said about HTML Lists because I would say I have practically covered all there is to cover on the topic. But don’t take my word for it, you can do your own research and if you find something on the topic that I didn’t cover, please feel free to bring my attention to it in the comment section.

And that’s a wrap, Folks! There you have it for this week! I hope you had fun. I know I always do!

?

Feel free to drop your comments in the comments section and share this Newsletter with anyone you know that might be interested in Frontend Development. If you have any questions that you’d like to ask on any of the subjects I’ve discussed so far or anything at all that has to do with Frontend Development, I am just a DM away.

So, until I come your way again next week, have a blessed and productive week. See you in a bit!

#FrontendDeveloper #HTML #Developer #SoftwareEngineer #YoungEngineer #YEFoN #NSE #Leadership #Service #Development