Lists in HTML are used to list information. Web developers can use HTML lists to group items that go together. All lists may contain one or more list elements.
There are three kinds of lists in HTML:
- Ordered List or Numbered List (ol)
- Unordered List or Bulleted List (ul)
- List of explanations or explanations (dl)
HTML Ordered List or Numbered List
By default, all of the list items in ordered HTML lists are marked with a number. It is also called a number list. The <ol> tag starts the list in order, and the <li> tag starts the list items.
Example
<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
</ol>
Output
- Red
- Blue
- Green
- Orange
HTML Unordered List or Bulleted List
All of the list items in an HTML Unordered list are marked with bullets. It can also be called a bulleted list. The <ul> tag starts an unordered list, and the <li> tag starts a list item.
Example
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
</ul>
Output
- Red
- Blue
- Green
- Orange
HTML List of Definitions or List of Descriptions
HTML Description list is another style of list that both HTML and XHTML can handle. It’s also called a “definition list” because it has entries like a dictionary or encyclopaedia.
When you want to show a glossary, list of terms, or other name-value list, the definition list is a good choice.
The following three tags are on the list of HTML definitions:
- <dl> tag shows where the list starts.
- <dt> tag defines a term.
- <dd> tag explains what the term means (description).
Example
<!DOCTYPE html>
<html>
<body><h2>A Description List</h2>
<dl>
<dt>Red</dt>
<dd>-Blood color is red.</dd>
<dt>Blue</dt>
<dd>-Sky color is blue</dd>
<dt>Green</dt>
<dd>-Tree color is Green.</dd>
<dt>Orange</dt>
<dd>-Orange color is orange.</dd>
</dl></body>
</html>
Output
HTML Nested List
A nested list is a list that is inside of another list. If you want a list with bullet points inside a list with numbers, this is called a “nested list.”
Example
<!DOCTYPE html>
<html>
<head>
<title>Example of Nested list</title>
</head>
<body>
<h2> Indian State names with thier capital</h2>
<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
</li>
<li>Gujarat
<ul>
<li>Gandhinagar</li>
</ul>
</li>
<li>Kashmir
<ul>
<li>Srinagar</li>
</ul>
</li>
<li>Maharashtra
<ul>
<li>Mumbai</li>
</ul>
</li>
<li>Punjab
<ul>
<li>Chandigarh</li>
</ul>
</li><li>Rajasthan
<ul>
<li>Jaipur</li>
</ul>
</li><li>Uttarpradesh
<ul>
<li>Lucknow</li></ul>
</li></ol>
</body>
</html>
Output
- Delhi
- NewDelhi
- Gujarat
- Gandhinagar
- Kashmir
- Srinagar
- Maharashtra
- Mumbai
- Punjab
- Chandigarh
- Rajasthan
- Jaipur
- Uttarpradesh
- Lucknow
HTML List Tags
| Tag | Description |
|---|---|
| <ul> | An unordered list |
| <ol> | An ordered list |
| <li> | A list item |
| <dl> | A description list |
| <dt> | A term in a description list |
| <dd> | The term in a description list |
# Summary
Here is what you've learned in this lesson:
- HTML Ordered List or Numbered List
- HTML Unordered List or Bulleted List
- HTML List of Definitions or List of Descriptions
- HTML Nested List
- HTML List Tags
Continue to the next lesson and learn more about HTML img tag.