A list is a collection of items, which might be organized in a sequential or unsequential manner. You can use a 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 one below the other under the Types of Computer category. Similarly, HTML allows you to 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.
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, to display the days in a week or months in a year, you would use numbered bullets. Similarly, HTML allows you to implement numbered or alphabetic bullet.
HTML provides two elements for creating an ordered list. These are:
- OL: creates an ordered list.
- LI: Specifies an item and it is a sub-element of the OL element.
Example for Ordered List
<TITLE>Days in a Week</TITLE>
<H2>Days in a Week:</H2>
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.
You can specify styles such as roman numeral or alphabets for bullets, which will be applied to an ordered list, see the below table.
I, ii, iii, …
An unordered list is a list wherein the items are arranged in a 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 bullet 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.
Example for Unordered Lists
<TITLE>Features of EasyPad</TITLE>
<H2>Features of EasyPad</H2>
<LI>Opens many files at a time</LI>
<LI>Unlimited undo and redo</LI>
<LI>Reads and writes both Windows and Unix files</LI>
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 the unordered lists in HTML. These bullet types are namely, disc, square, and circle; which the values that the list-style-type property can hold. The default value is disc, which is applied to unordered list even if the list-style-type property is not specified. These values are not case-sensitive.
A definition list refers to a collection of terms with their corresponding description. For example, you can display a glossary on a web page by creating a definition list appears with the term indented on the left followed by the description on the right or on the next line. By default, the description text appears on the next line and is aligned with respect to 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:
- DL: Is 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 term to be defined or described.4
Example for Definition Lists
<TITLE>TYPES OF NOUNS</TITLE>
<H2>Types of Nouns</H2>
<DD> It is a name of an object in general, such as
pencil, pen, paper, and so no.</DD>
<DD>It is the unique name of a person or a place.</DD>