HTML TUTORIALS
HTML5 FEATURES
HTML5 References
HTML List Tags
Create lists on a webpage
HTML (Hypertext Markup Language) provides a few different types of lists that can be used to display information in an organized and easy-to-read manner. In HTML list tags are used to organize and display information in a structured manner.
- Unordered list — Used to create a list of related items, in no particular order.
- Ordered list — Used to create a list of related items, in a specific order.
- Definition list — Used to create a list of terms and their descriptions.
In the following sections we will cover all the three types of list one by one:
Unordered List:
An unordered list is a bulleted list where each item in the list is preceded by a bullet point. To create an unordered list in HTML, use the <ul> element and wrap each list item with the <li> element. For example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>— The output of the above example will look something like this:
- Item 1
- Item 2
- Item 3
Ordered List
An ordered list is a numbered list where each item in the list is preceded by a number. To create an ordered list in HTML, use the <ol> element and wrap each list item with the <li> element. For example:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>— The output of the above example will look something like this:
- Item 1
- Item 2
- Item 3
Definition List
A definition list is a list of terms and their definitions. To create a definition list in HTML, use the <dl> element and wrap each term with the <dt> element and each definition with the <dd> element. For example:
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>— The output of the above example will look something like this:
- Term 1
- Definition 1
- Term 2
- Definition 2
- Term 3
- Definition 3
These are the basic types of lists that can be created in HTML. You can also customize the appearance of these lists using CSS.
Lists can also be nested within each other, creating a hierarchy of information. For example, an ordered list can contain an unordered list within each item:
<ol>
<li>Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 2</li>
</ol>— The output of the above example will look something like this:
- Item 1
- Subitem 1
- Subitem 2
- Item 2
Using HTML lists can help to make information on a webpage more organized and easily readable.
