How to create an unordered list in HTML ?
In this article, we will know how to create an unordered list in HTML. An Unordered list <ul> tag in HTML is used to define the unordered list item in an HTML document. It contains the list items <li> element. The <ul> tag requires opening and closing tags.
Syntax:
<ul> List of items </ul>
Attribute: This tag contains two attributes which are listed below:
Note: The <ul> attributes are not supported by HTML 5.
Example: This example illustrates the use of an unordered list by using the <ul> tag.
HTML
<!DOCTYPE html> < html > < head > < title >Unordered list</ title > </ head > < body > < h2 >Welcome To w3wiki Learning</ h2 > < h5 >List of available courses</ h5 > < ul > < li >Data Structures & Algorithm</ li > < li >Web Technology</ li > < li >Aptitude & Logical Reasoning</ li > < li >Programming Languages</ li > </ ul > </ body > </ html > |
Output:
There are several list-type attributes that can be used with unordered list items.
HTML <li> type Attribute: The <li> type attribute in HTML is used to specify the type of a list items. This attribute also defines the style of the bullet point of the list items.
<li type="disc|circle|square">
Attribute Values:
- disc: It is the default value. It creates a filled circle.
- circle: It creates an unfilled circle.
- square: It creates a filled square.
Note: The <li> type attribute is not supported by HTML 5.
Example: This example describes the HTML Unordered List.
HTML
<!DOCTYPE html> < html > < head > < title >How to define an unordered list</ title > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML5: How to define an unordered list?</ h2 > < p >w3wiki courses List:</ p > < ul > < li >Beginner</ li > < li >Sudo</ li > < li >Gfg</ li > < li >Gate</ li > < li >Placement</ li > </ ul > </ body > </ html > |
Output:
The HTML unordered list has various list item markers:
Disc: It is used to set the list item marker to a bullet i.e default.
Example 1: This example illustrates the use of an unordered list with a disc bullet by setting the list-style-type property to disc.
HTML
<!DOCTYPE html> < html > < head > < title >HTML ul tag</ title > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Unordered List with Disc Bullets</ h2 > < p >w3wiki courses List:</ p > < ul style = "list-style-type:disc;" > < li >Beginner</ li > < li >Sudo</ li > < li >Gfg</ li > < li >Gate</ li > < li >Placement</ li > </ ul > </ body > </ html > |
Output:
Circle: It is used to set the list item marker to a circle.
Example 2: In this example, we have used an unordered list with a circle bullet by setting the list-style-type property to circle.
HTML
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ h1 > < h2 >Unordered List with Circle Bullets</ h2 > < p >w3wiki courses List:</ p > < ul style = "list-style-type: circle" > < li >Beginner</ li > < li >Sudo</ li > < li >Gfg</ li > < li >Gate</ li > < li >Placement</ li > </ ul > </ body > </ html > |
Output:
Square: It is used to set the list item marker to a square.
Example 3: In this example, we have used an unordered list with a square bullet by setting the list-style-type property to square.
HTML
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ h1 > < h2 >Unordered List with Square Bullets</ h2 > < p >w3wiki courses List:</ p > < ul style = "list-style-type: square" > < li >Beginner</ li > < li >Sudo</ li > < li >Gfg</ li > < li >Gate</ li > < li >Placement</ li > </ ul > </ body > </ html > |
Output:
none: It is used to set the list item marker with no mark.
Example 4: This example illustrates the use of an unordered list with a no bullet by setting the list-style-type property to none.
HTML
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ h1 > < h2 >Unordered List with No Bullets</ h2 > < p >w3wiki courses List:</ p > < ul style = "list-style-type: none" > < li >Beginner</ li > < li >Sudo</ li > < li >Gfg</ li > < li >Gate</ li > < li >Placement</ li > </ ul > </ body > </ html > |
Output:
Nested Unordered List: It is used to nest the list items i.e., list inside another list.
Example: This example describes the use of the unordered list in a nested format.
HTML
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ h1 > < h2 >Nested Unordered List</ h2 > < p >w3wiki courses List:</ p > < ul > < li >DSA</ li > < ul > < li >Array</ li > < li >Linked List</ li > < li >stack</ li > < li >Queue</ li > </ ul > < li >Web Technologies</ li > < ul > < li >HTML</ li > < li >CSS</ li > < li >JavaScript</ li > </ ul > < li >Aptitude</ li > < li >Gate</ li > < li >Placement</ li > </ ul > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 94.0 & above
- Firefox 92.0 & above
- Microsoft Edge 93.0
- IE 11.0
- Safari 14.1
- Opera 78.0
Contact Us