HTML List
In this tutorial, we will learn about the HTML List, as well as its kinds and several approaches to apply them using an example.
A list is a collection of small bits of connected information that is used to present data or other information in web pages in either an ordered or unordered fashion. For example, in order to purchase products, we must first create a list that may be either sorted or unordered, allowing us to arrange the data and easily locate the item. Please see the HTML <li> type Attribute article for more information on the many sorts of attributes that may be used with sorted and unordered lists.
Tags that are supported: These tags are used in HTML listings.
- HTML <ul> Tag
- HTML <ol> Tag
- HTML <dl> Tag
Unordered list in HTML
An unordered list begins with the <ul> tag. Each list item is preceded by the <li> tag. By default, list items are denoted with bullets, which are little black circles.
Syntax
Attribute: This tag has two characteristics, which are as follows:
- compact: It will make the list shorter.
- type: This parameter indicates the type of marker that will be used in the list.
Note: HTML5 does not recognize the <ul> characteristics.
There are several list item identifiers in an HTML unordered list:
HTML Ordered List
An ordered list in HTML begins with the <ol> element. Each list item is preceded by the <li> tag. By default, the list entries are denoted with numbers.
Syntax
Attributes:
- compact: It specifies whether or not the list should be compressed (the compact property is not supported by HTML5). Instead, use CSS.) .
- reversed: It specifies that the order shall be descending.
- start: This specifies where the order will begin, whether it be a number or an alphabet.
- type: It specifies whether the order in your list should be numeric, alphabetic, or roman numerals (1, A, a, I, and I).
HTML Description List
A description set is a list of words that each have a description. The description list is defined by the <dl> tag, the term name is defined by the <dt> tag, and each term is described by the <dd> tag. For further information, see the article How to Add a Description List to an Element Using HTML.
Syntax
FAQs
To create a nested list in HTML, you can simply add another <ul> or <ol> element inside an existing <li> element. For example, to create a nested unordered list, you would write:
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>Nested list item 1</li>
<li>Nested list item 2</li>
</ul>
</li>
<li>List item 3</li>
</ul>This will create an unordered list with three items, where the second item has a nested unordered list with two items. You can also create nested ordered lists using the same approach but with the <ol> element.
To add links to list items in HTML, you can use the anchor tag <a> and wrap it around the list item content. Here's an example:
<ul>
<li><a href="https://webtutor.dev">Link 1</a></li>
<li><a href="https://webtutor.dev">Link 2</a></li>
<li><a href="https://webtutor.dev">Link 3</a></li>
</ul>In this example, each list item is wrapped in an anchor tag, and the href attribute specifies the URL that the link should point to. When the user clicks on the link, they will be taken to the specified URL.