How to create an unordered list in HTML ?
Last Updated :
09 Dec, 2021
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:
- compact: It will render the list smaller.
- type: It specifies which kind of marker is used in the list.
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 GeeksforGeeks 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:
HTML Unordered list
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 >GeeksforGeeks</ h1 >
< h2 >HTML5: How to define an unordered list?</ h2 >
< p >GeeksforGeeks courses List:</ p >
< ul >
< li >Geeks</ li >
< li >Sudo</ li >
< li >Gfg</ li >
< li >Gate</ li >
< li >Placement</ li >
</ ul >
</ body >
</ html >
|
Output:
HTML Unordered list
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 >GeeksforGeeks</ h1 >
< h2 >Unordered List with Disc Bullets</ h2 >
< p >GeeksforGeeks courses List:</ p >
< ul style = "list-style-type:disc;" >
< li >Geeks</ li >
< li >Sudo</ li >
< li >Gfg</ li >
< li >Gate</ li >
< li >Placement</ li >
</ ul >
</ body >
</ html >
|
Output:
Unordered list with disc list item marker
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 >GeeksforGeeks</ h1 >
< h2 >Unordered List with Circle Bullets</ h2 >
< p >GeeksforGeeks courses List:</ p >
< ul style = "list-style-type: circle" >
< li >Geeks</ li >
< li >Sudo</ li >
< li >Gfg</ li >
< li >Gate</ li >
< li >Placement</ li >
</ ul >
</ body >
</ html >
|
Output:
Unordered list with circle list item marker
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 >GeeksforGeeks</ h1 >
< h2 >Unordered List with Square Bullets</ h2 >
< p >GeeksforGeeks courses List:</ p >
< ul style = "list-style-type: square" >
< li >Geeks</ li >
< li >Sudo</ li >
< li >Gfg</ li >
< li >Gate</ li >
< li >Placement</ li >
</ ul >
</ body >
</ html >
|
Output:
Unordered list with square list item marker
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 >GeeksforGeeks</ h1 >
< h2 >Unordered List with No Bullets</ h2 >
< p >GeeksforGeeks courses List:</ p >
< ul style = "list-style-type: none" >
< li >Geeks</ li >
< li >Sudo</ li >
< li >Gfg</ li >
< li >Gate</ li >
< li >Placement</ li >
</ ul >
</ body >
</ html >
|
Output:
Unordered list without list item marker
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 >GeeksforGeeks</ h1 >
< h2 >Nested Unordered List</ h2 >
< p >GeeksforGeeks 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:
Nested Unordered lIst
Supported Browsers:
- Google Chrome 94.0 & above
- Firefox 92.0 & above
- Microsoft Edge 93.0
- IE 11.0
- Safari 14.1
- Opera 78.0
Share your thoughts in the comments
Please Login to comment...