How to implement various types of lists in HTML ?
In this article, we will see the HTML List & their types along with their implementation. The List can be used to store the information in short, either in bulleted form or numbered format, that visually help to look at a glance. In other words, it is used to group together related items or lists, & used to structure and show important information where each list item is displayed on the new line.
HTML lists allow the content to follow a proper semantic structure. All the tags in the list require opening and closing tags. There are 3 types of lists in HTML, namely:
- Unordered List
- Ordered List
- Description List
We will explore all the List types in HTML, along with their implementation through the examples.
Unordered List: An Unordered list is used to create a list of related items, in bulleted or unordered format. It starts with the <ul> tag, followed by the <li> tag to show list items inside <ul> tag.
Syntax:
<ul> <li>Item1</li> ... </ul>
We can also use different CSS properties to create a list with different styles. It can have one of the following values :
- circle: It gives a circle list item marker.
- square: It gives square as list item marker.
- disc: This is the default filled circular bullet item marker.
- none: This is used to unmark list items.
Example 1: This example describes the Unordered List in HTML.
HTML
<!DOCTYPE html> < html > < head > < title >HTML Lists</ title > </ head > < body > < h2 >w3wiki</ h2 > < h4 >HTML Unordered List</ h4 > < h4 >Coding Language</ h4 > < ul > < li >C</ li > < li >C++</ li > < li >Core-Java</ li > < li >Python</ li > < li >Javascript</ li > </ ul > </ body > </ html > |
Output:
Example 2: In this example, we will create an unordered list with a square list item marker.
HTML
<!DOCTYPE html> < html > < head > < title >HTML Lists</ title > </ head > < body > < h2 >w3wiki</ h2 > < h4 >HTML Unordered List</ h4 > < h4 >Coding Language</ h4 > < ul style = "list-style-type:square;" > < li >C</ li > < li >C++</ li > < li >Core-Java</ li > < li >Python</ li > < li >Javascript</ li > </ ul > </ body > </ html > |
Output:
Ordered Lists: The Ordered lists have an order which is either numerical or alphabetical. The <ol> tag is used to create ordered lists in HTML and just like unordered list, we use <li> tag to define or show lists inside <ol> tag.
Syntax:
<ol> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ol>
The ordered list has a type operator which defines what type of order the list will have, like whether the list will start with a numerical value or an alphabetical value. The various ways to use the ordered list, are given below:
- type = “1”: List will start from 1.
- type = “A”: Here the list will start from A.
- type = “a”: Here the list will start from lowercase a.
- type = “I”: The list will start from Roman numbers.
- type = “i”: TheList will start from lowercase Roman numbers.
Example 1: This example describes the Ordered List in HTML.
HTML
<!DOCTYPE html> < html > < head > < title >HTML Lists</ title > </ head > < body > < h2 >w3wiki</ h2 > < h4 >HTML Ordered List</ h4 > < h4 >Coding Language</ h4 > < ol > < li >C</ li > < li >C++</ li > < li >Core-Java</ li > < li >Python</ li > < li >Javascript</ li > </ ol > </ body > </ html > |
Output:
Example 2: In this example, we will create an ordered list with roman numbers.
HTML
<!DOCTYPE html> < html > < head > < title >HTML Lists</ title > </ head > < body > < h2 >w3wiki</ h2 > < h4 >HTML Ordered List</ h4 > < h4 >Coding Language</ h4 > < ol type = "I" > < li >C</ li > < li >C++</ li > < li >Core-Java</ li > < li >Python</ li > < li >Javascript</ li > </ ol > </ body > </ html > |
Output:
The ordered list has another attribute called “start” where you can specify the starting point for the order of the list.
- start: This is used to specify the starting point for the list item marker.
Example 3: In this example, we will create an ordered list with different start numbers using the start attribute.
HTML
<!DOCTYPE html> < html > < head > < title >HTML Lists</ title > </ head > < body > < h2 >w3wiki</ h2 > < h4 >HTML Ordered List</ h4 > < h4 >Coding Language</ h4 > < ol start = "12" > < li >C</ li > < li >C++</ li > < li >Core-Java</ li > < li >Python</ li > < li >Javascript</ li > </ ol > </ body > </ html > |
Output:
Description List: A description list is a type of list where each item has a description. It is also known as a definition list. The <dl> tag is used to create description list, the <dt> tag defines the item, and the <dd> tag describes each item in list.
Syntax:
<dl> Contents... </dl>
The HTML definition list contains following 3 tags:
Example: This example illustrates the Description List in HTML.
HTML
<!DOCTYPE html> < html > < head > < title >HTML Lists</ title > </ head > < body > < h2 >w3wiki</ h2 > < h4 >Description List</ h4 > < strong >Developers Life</ strong > < dl > < dt >Code</ dt > < dd >- Code all day!</ dd > < dt >Eat</ dt > < dd >- Eat healthy food</ dd > < dt >Sleep</ dt > < dd >- Sleep soundly!</ dd > </ dl > </ body > </ html > |
Output:
Contact Us