Why do we need to declare the <ul> & <ol> tags in HTML ?
The <ul> tag is used to create an unordered list. It is used to make a list in those situations where the ordering of list items is not significant. On the other hand, the <ol> tag is to create an ordered list. As the name implies, it is used in those situations where list items are maintained order-wise. Every list has one or more list elements which are represented using the <li> tag.
In this article, we will learn about the usage of both <ul> and <ol> tags while creating the list in the HTML document.
HTML Unordered List: The <ul> tag is used to create an unordered/bulleted list in the HTML document. It is used to group items of particular information where the order is not important like the menu card of a restaurant, features of a product, etc.
The <ul> tag is paired tag so it must have starting <ul> and closing</ul> tags. The list elements are marked using <li> tag which is empty/unpaired tag i.e., closing </li> tag is optional. These are block elements, so the line break is automatically inserted below and above the tags.
Syntax:
<ul type="disc"> <li> List element1 </li> <li> List element2 </li> ... </ul>
Attribute Values:
- disc: solid disc appears before the list element
- circle: empty circle appears before the list element
- square: solid square appears before the list element
- none: noting will appear
Note: If you have not specified any type attribute then by default, a solid disc appears before the list elements.
Example 1: This is a simple example that will illustrate the list in an unordered form.
HTML
<!DOCTYPE html> < html > < head > < title >Unordered List</ title > </ head > < body > < h2 >Unordered List</ h2 > < ul type = "circle" > < li >Computers</ li > < li >Science</ li > < li >Mathematics</ li > < li >Languages</ li > < li >Social Sciences</ li > </ ul > </ body > </ html > |
Output:
Example 2: This example will illustrate the use of a nested form of an unordered list.
HTML
<!DOCTYPE html> < html > < head > < title >Nested Unordered List</ title > </ head > < body > < h2 >Nested Unordered List</ h2 > < ul type = "circle" > < li >Programming Languages < ul type = "square" > < li >C++</ li > < li >Python</ li > </ ul > < li >Softwares</ li > < ul type = "square" > < li >System Software</ li > < li >Application Software</ li > </ ul > </ ul > </ body > </ html > |
Output:
HTML Ordered List: The <ol> is used to create an ordered/numbered list in the HTML document. It is used to group items of information in a specific order like instructions to install application software etc.
The <ol> tag is paired tag so it must have starting <ol> and closing</ol> tags. The list elements are marked using <li> tag which is empty/unpaired tag i.e., closing </li> tag is optional. These are block elements, so the line break is automatically inserted below and above the tags.
Syntax:
<ol type="1"> <li> List element1 </li> <li> List element2 </li> ... </ol>
Attribute Values:
- number: Numbers will appear before the list element ex: 1, 2, 3.
- lowercase letters: Lowercase Letters will appear before the list element ex: a, b, c.
- Uppercase letters: Uppercase Letters will appear before the list element ex: A, B, C.
- Lowercase Roman: Lowercase Roman will appear before the list element ex: i, ii, iii.
- Uppercase Roman: Uppercase Roman will appear before the list element ex: I, II, III.
Note: If you have not specified any type attribute then by default, Numbers will appear before the list elements specified with <li> tag when the webpage is viewed in a web browser.
Example 1: This is a simple example that will illustrate the list in an ordered form.
HTML
<!DOCTYPE html> < html > < head > < title >Ordered List</ title > </ head > < body > < h2 >Ordered List</ h2 > < ol type = "1" start = "2" > < li type = "a" > Desktop < li type = "A" value = "6" >Laptop < li type = "i" >Tablet < li type = "I" >Mobile Phone </ ol > </ body > </ html > |
Output:
Example 2: This example will illustrate the use of a nested form of an ordered list.
HTML
<!DOCTYPE html> < html > < head > < title >Nested Ordered List</ title > </ head > < body > < h2 >Nested Ordered List</ h2 > < ol > < li > Programming Languages < ol type = "A" > < li >Python < li >R </ ol > < li > Softwares < ol type = "I" > < li >System Software < li >Application Software </ ol > </ ol > </ body > </ html > |
Output:
We can also use both ordered and unordered lists at the same list and create a nested list.
Example:
HTML
<!DOCTYPE html> < html > < head > < title >Nested Ordered and Unordered List</ title > </ head > < body > < h2 >Nested Ordered and Unordered List</ h2 > < ol > < li > Programming Languages < ol type = "i" > < li >Python < li >R </ ol > < li > Softwares < ul type = "square" > < li >System Software < li >Application Software </ ul > </ ol > </ body > </ html > |
Output: