HTML Lists - Ordered, Unordered, Description and Nested Lists Explained with Examples
In this lesson, we will give you information about HTML Lists. You will know what HTML List is. How do you make a List in HTML Document?
How many types of HTML lists are there? You will also get answers to other questions.
This lesson has been divided into small parts to understand the HTML List Concept easily. Whose list has been given below?
{tocify} $title={Table of Contents}
Introduction to HTML List
Introducing any important data in a well-formed way in point is called a list. And the tag which is used to define the list in an HTML document is called an HTML list tag.
HTML List maintains the Document Structure and helps to display necessary information in Points. Due to this, our content looks meaningful and readable.
HTML List is very important; Lists are also used to create Navigation menus on Websites apart from Articles.
Names and uses of HTML Elements used to create HTML Lists
Multiple Elements are utilised to make HTML List. That's why we are first talking about the names and usage of the elements which are used to create HTML Lists -
- <ul> Element: The full name of UL Element is Unordered List. Unorder List Element make Bullet Lists or Unorder Lists.
- <ol> Element: The full name of OL Element is Order List. Order List Element create number or Order Lists.
- <li> Element: The full name of LI Element is List Item. The list item element defines the data to be written in a list.
- <dl> Element: The full name of DL Element is the Definition List. Defines a description list.
- <dt> Element: The full name of DD Element is Definition Term. Defines a term in a description list.
- <dd> Element: The full name of DD Element is Definition Description. Describes the term in a description list.
Types of HTML List
Multiple types of Lists are utilised to show Data in Points in HTML. Each type of list has its particular purpose and intention. Below is being told about the type of HTML List.
- Unordered List - <ul> List
- Ordered List – <ol> List
- Definition List – <dl> List
- nested list
Unordered HTML List
An unordered list is a collection of related items with no particular order or sequence. This list is made by using HTML <ul> tag. Per an item in the list is marked with a bullet.
Example:
<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><ul><li>Google Chrome</li><li>Firefox</li><li>Safari</li><li>Microsoft Edge</li></ul></body></html>{codeBox}
Output:
- Google Chrome
- Firefox
- Safari
- Microsoft Edge
The type Attribute
In the Unordered List, the type attribute defines the Bullet Style.
By default, “Circle” is used for List Items in UL List. But, with the help of the type attribute, we can apply 3 other types of List Style Type apart from Circle.
- <ul type = "square">
- <ul type = "disc">
- <ul type = "circle">
Example - Square:
<ul style="list-style-type:square;"><li>Google Chrome</li><li>Firefox</li><li>Safari</li><li>Microsoft Edge</li></ul>{codeBox}
Example - disc:
<ul style="list-style-type:disc;"><li>Google Chrome</li><li>Firefox</li><li>Safari</li><li>Microsoft Edge</li></ul>{codeBox}
Example - circle:
<ul style="list-style-type:circle;"><li>Google Chrome</li><li>Firefox</li><li>Safari</li><li>Microsoft Edge</li></ul>{codeBox}
<ul> Unordered - Horizontal List with CSS
Example:
<!DOCTYPE html><html lang="en"><head><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #000;}li {float: left;}li a {display: block;color: white;text-align: center;padding: 16px;text-decoration: none;}li a:hover {background-color: red;}</style></head><body><h2>Navigation Menu</h2><p>In this example, we have utilised CSS to style the list horizontally to make a navigation menu:</p><ul><li><a href="#blog">Blog</a></li><li><a href="#news">News</a></li><li><a href="#sports">Sports</a></li><li><a href="#contact">Contact</a></li></ul></body></html>{codeBox}
Ordered HTML List
If you are needed to put your items in a numbered list rather than a bulleted one, then HTML ordered list will be used.
This list is made by using <ol> tag. The numbering begins at one and is incremented by one for each successive ordered list element organised with <li>.
Example:
<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><ol><li>Google Chrome</li><li>Firefox</li><li>Safari</li><li>Microsoft Edge</li></ol></body></html>{codeBox}
Output:
- Google Chrome
- Firefox
- Safari
- Microsoft Edge
The type Attribute
You can use the type attribute for <ol> tag to specify the numbering you like. By default, it is a number. The following are the possible options -
- <ol type = "1"> - Default-Case Numerals.
- <ol type = "A"> - Upper-Case Letters.
- <ol type = "a"> - Lower-Case Letters.
- <ol type = "I"> - Upper-Case Numerals.
- <ol type = "i"> - Lower-Case Numerals.
HTML Description Lists
HTML even supports description lists. A description list is a list of terms with a description of each term.
The <dl>, <dt> and <dd> tags are used to define the description list.
The 3 HTML description list tags are given below:
- <dl> tag defines the description list.
- <dt> tag defines data term.
- <dd> tag defines data definition (description).
Example:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' /><title>HTML Description List</title></head><body><dl><dt>HTML</dt><dd>HTML stands for Hyper Text MarkUp Language and it is widely used to create webpages.</dd><dt>CSS</dt><dd>CSS stands for Cascading Style Sheet and it is used to Style an HTML Document.</dd></dl></body></html>{codeBox}
Output:
- HTML
- HTML stands for Hyper Text MarkUp Language and it is widely used to create webpages.
- CSS
- CSS stands for Cascading Style Sheet and it is used to Style an HTML Document.
Nested HTML List
You have learned to define all types of lists in HTML above. Now we will learn to create a Nested List in HTML.
A nested List is not an HTML type as such. But we have included it here as the 4th type.
We have added this topic to simplify the List Concept.
A nested List means to create another List inside a List. In simple words, you can define OL in a UL. And UL can be defined in one OL.
Example:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' /><title>HTML Nested List</title></head><body><ol><li>Programming Languages<ul><li>HTML</li><li>PHP</li></ul></li><li>CMS<ol type=”a”><li>WordPress</li><li>Blogspot</li></ol></ol></body></html>{codeBox}
When you see the above code in the browser, you will see results like this.
Output:
- Programming Languages
- HTML
- PHP
- CMS
- WordPress
- Blogger
Chapter Summary
- Utilize the HTML <ul> element to define an unordered list
- Use the CSS list-style-type property to specify the list item marker
- Use the HTML <li> element to determine a list item
- List items can have other HTML elements
- Utilize the CSS property float:left to display a list horizontally
- Utilize the HTML <ol> element to represent an ordered list
- Use the HTML type attribute to specify the numbering type
- Use the HTML <li> element to determine a list item
- Lists can be nested
- List items can include other HTML elements
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML Lists - Ordered, Unordered, and Description Lists.” If this post is favorable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
