Last Updated on April 26, 2023 by Roshan Parihar
Definition of HTML <ul> tag
HTML <ul> tag is used to show information in the form of a list. This display list with no special order. We can call this list as a bulleted list.
The table of content showing the list of headings I am using to explain HTML unordered list tag.
Syntax
|
1 2 3 4 |
<ul> <li>Enter list content. </li> .... </ul> |
It includes HTML list tag to show listings. There can be multiple <li> tags in the <ul> tag.
If you want to show information in the form of lists and want to use the numbers at the start in each list item. You can use <ul>. We can call this list as Numbered list.
|
1 2 3 4 5 6 7 8 9 |
<p>List of Games: </p> <ul> <li>Football</li> <li>Cricket</li> <li>Table Tennis</li> <li>Badminton</li> <li>Basketball</li> <li>Baseball</li> </ul> |
Output
List of Games:
- Football
- Cricket
- Table Tennis
- Badminton
- Basketball
- Baseball
Multiple unordered list(<ul> inside <ul>)
You can use multiple <ul> inside the unordered list. To use multiple unordered list, use <ul> tag inside <li> tag. To explain this, see the example below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<p>List of Games: </p> <ul> <li>Indoor Games <ul> <li>Chess</li> <li>Ludo</li> <li>Video games</li> </ul> </li> <li>Outdoor Games <ul> <li>Cricket</li> <li>Badminton</li> <li>Football</li> </ul> </li> </ul> |
Output
List of Games:
- Indoor Games
- Chess
- Ludo
- Video games
- Outdoor Games
- Cricket
- Badminton
- Football
This contains the multiple stage unordered lists. First list contains the list of Indoor games chess, Ludo and video games. The second list contains the list of outdoor games.
List of type attribute options
Show different list styles using the type attribute.
| Sr. No. | Type Attribute options | Description |
|---|---|---|
| 1 | square | Used to show square shape bulleted unordered list. |
| 2 | disc | Used to show disc shape bulleted unordered list. |
| 3 | circle | Used to show circle shape bulleted unordered list. |
Unordered list with type=”square”
It is used to show the square shape bulleted HTML unordered list. The list contains the dots which are square in shape.
|
1 2 3 4 5 6 7 |
<p>List of Countries: </p> <ul type="square"> <li>United States</li> <li>China</li> <li>united Kingdom</li> <li>Australia</li> </ul> |
Output
List of Countries:
- United States
- China
- united Kingdom
- Australia
This contains the list of countries. You can also list out the square shaped list with the CSS list style property. Specify the value as ‘square’. This converts the bullets to square shape.
unordered List with type=”disc”
It is used to show disc shape bulleted unordered list. The dots are also applicable to the internal lists.
|
1 2 3 4 5 6 7 |
<p>List of Fruits:</p> <ul type="disc"> <li>Apple</li> <li>Banana</li> <li>Grapes</li> <li>Orange</li> </ul> |
Output
List of Fruits:
- Apple
- Banana
- Grapes
- Orange
unordered List with type=”circle”
It is used to show circle shape bulleted list.
|
1 2 3 4 5 6 7 |
<p>List of Movies:</p> <ul type="circle"> <li>Resident Evil</li> <li>Titanic</li> <li>Jurassic Park</li> <li>Beauty and the Beast</li> </ul> |
Output
List of Movies:
- Resident Evil
- Titanic
- Jurassic Park
- Beauty and the Beast
Resources and References
1. W3C Specification.
2. HTML living standard
3. W3C project using Github