HTML lists are used to display related information in an easy-to-read and concise way as lists.
We can use three types of lists to represent different types of data in HTML:
<ul>
<ol>
<dl>
The unordered list is used to represent data in a list for which the order of items does not matter.
In HTML, we use the <ul>
tag to create unordered lists. Each item of the list must be a <li>
tag which represents list items. For example,
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
Browser Output
Here, <li>Apple</li>
, <li>Orange</li>
, and <li>Mango</li>
are the list items.
The ordered list is used to represent data in a list for which the order of items has significance.
The <ol>
tag is used to create ordered lists. Similar to unordered lists, each item in the ordered list must be a <li>
tag. For example,
<ol>
<li>Ready</li>
<li>Set</li>
<li>Go</li>
</ol>
Browser Output
Here, you can see list items are represented with numbers to represent a certain order.
The HTML description list is used to represent data in the name-value form. We use the <dl>
tag to create a definition list and each item of the description list has two elements:
<dt>
tag<dd>
tagLet's see an example,
<dl>
<dt>HTML</dt>
<dd>Hyper-Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading StyleSheets</dd>
<dt>JS</dt>
<dd>Javascript</dd>
</dl>
Browser Output
Since the description list includes the definition of a term, it is also known as the definition list. To learn more about the description list, visit HTML Description List.
Tag | Explanation |
---|---|
<ol> | Defines an ordered list. |
<ul> | Defines an unordered list. |
<dl> | Defines a description list. |
<li> | Defines a list item in ordered or unordered lists. |
<dt> | Defines a term in description list. |
<dd> | Defines the description of a term in the description list. |