HTML Lists and Their Types

Zia

1 Follower

Follow

Jun 14, 2024

-

2 sec read

409

0

0

0

Lists

A list is a collection of items, which might be organized sequentially or unsequentially. You can list to display related items that belong to a particular category. For example, to display the types of computers, such as mainframe, microcomputer, and laptops, you would organize these items below each other under the Types of Computers category. Similarly, HTML allows you to display related items in a list on a Web page.

A list in HTML can contain paragraphs, line breaks, images, links, and other lists. The items within a list are displayed on a Web page one below the other using bullets. HTML supports three types of lists. These are as follows:

• Ordered
• Unordered
• Definition

1. Ordered List

An ordered list is a list of items arranged in a particular order. Here, the order of the items is important as it indicates a sequential flow. For example, you would use numbered bullets to display the days in a week or months in a year. Similarly, HTML allows you to implement ordered lists where each item in the list is displayed using a numbered or alphabetical bullet. HTML provides two elements for creating an ordered list. These are as follows:

• OL: Create an ordered list.
• LI: Specifies an item and it is a sub-element of the OL element.

Different numbering styles, such as Roman numerals or alphabetic bullets, can be applied to an ordered list.

• Decimal (1, 2, 3,...)
• Lower-alpha (a, b, c,...)
• Upper-alpha (A, B, C,...)
• Lower-Roman (i, ii, iii,...)
• Upper-roman (I, II, III,...)

The list-style-type property is used to specify a numbering style for the ordered list. It is the property of the style attribute, which is specified within the <ol> tag.

2. Unordered List

An unordered list is a list where the items are arranged in random order. This means that you will create an unordered list when the order of related items is not important. For example, to list the features of a product, you would create an unordered list. Each item in an unordered list is displayed using symbolic bullets such as circles and squares. These bullets are similar to the bullets provided by Microsoft Office Word. HTML provides the UL element to create an unordered list.

The UL element contains the <ul> tag and multiple LI sub-elements. The <ul> tag marks the beginning of the unordered list. Each of the li sub-elements starts with the <li> tag followed by a feature of the EasyPad product. Each feature will be displayed with the default symbolic bullet, which is a small black disc.

The list-style-type property specifies the type of bullet to be applied to an unordered list. There are three types of bullets defined for unordered lists in HTML. These bullet types are namely disc, square, and circle. The default value is a disc, which is applied to the unordered list, even if the list-style-type property is not specified.

3. Definition List

A definition list refers to a collection of terms with their corresponding descriptions. For example, you can display a glossary on a Web page by creating a definition list, which will contain the terms and their descriptions. A definition list appears with the term indented on the left followed by the description on the right or the next line. By default, the description text appears on the next line and is aligned with the term.

You can specify a single line or multiple lines of description for each term. HTML provides three elements to create a definition list. These elements are as follows:

• DL: A container element that consists of the DT and DD sub-elements. It specifies that a definition list will be created using these elements.
• DT: Specifies the term to be defined or described.
• DD: Specifies the definition or description of the term.

Consider a scenario where you want to create a Web page that displays types of nouns and their descriptions. To do this, you must create a definition list. The steps to create a definition list are as follows:

• Specify the DL element to indicate that you want to create a definition list.
• Use the DT element to specify the term such as a Common Noun.
• Use the DD element to specify the description of the term.