HTML lists are a powerful and useful element for the web page to display data in a formed and semantic way. There are 3 types of HTML lists which are ordered list, unordered list and description list. Each type of the lists have their pros and cons and it has a difference specific purpose and meaning for a web page that we might put it in difference use. To be short, I will kick start with you for basics understand of each of them. Then we may go deeper with code later.
Three Types of HTML Lists
Ordered List <ol>: For a list of related items with a specific order.
Unordered List <ul>: For a list of related items without specific order.
Description List <dl>: For a list of terms with descriptions.
Ordered List
The ordered list is good for listing items with a specific order, the list will start from 1 to 2 to 3 to infinite numbers. If you would like to list the items out with a specific order, this is the list you are looking for.
How Ordered List Looks
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
- Sunday
Ordered List In HTML Code
To create an ordered list, you will start with <ol> element and creating the <li> element of each list inside of <ol>.
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ol>Unordered List
The unordered list is good for listing items with no specific order, the list will start and end with a dot. If you would like to list the items out without a specific order, this is the list you are looking for.
How Unordered List Looks
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
- Sunday
Unordered List In HTML Code
To create an unordered list, you will start with <ul> element and creating the <li> element of each list inside of <ul>.
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>Description List
The description list is good for listing terms with descriptions. If you would like to list the terms with descriptions, this is the list you are look for.
How Description List Looks
- HTML
- is stands for Hypertext Markup Language.
- CSS
- is stands for Cascading Style Sheet.
- JS
- is stands for JavaScript.
How Description List In HTML Code
To create a Description list, you will start with <dl> element and creating the <dt> and <dd> element of each definition term and definition description inside of <dl>.
<dl>
<dt>HTML</dt>
<dd>is stands for Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>is stands for Cascading Style Sheet.</dd>
<dt>JS</dt>
<dd>is stands for JavaScript.</dd>
</dl> New to HTML?
If you are a completely beginning of HTML, but want to test it out with this code. You can simply run the code on the top-right side of the code snippet. If you want to create your own HTML page from scratch. Check out How To Create an HTML Page.
Here’s the code with all ordered list, unordered list and description list that you can kick start immediately with your own HTML web page.
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists from jorcus.com</title>
</head>
<body>
<h1>HTML Lists from jorcus.com</h1>
<h2>Ordered List</h2>
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>is stands for Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>is stands for Cascading Style Sheet.</dd>
<dt>JS</dt>
<dd>is stands for JavaScript.</dd>
</dl>
</body>
</html>