HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
- disc
- circle
- square
- none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
| Type | Description |
|---|---|
| Type “disc” | This is the default style. In this style, the list items are marked with bullets. |
| Type “circle” | In this style, the list items are marked with circles. |
| Type “square” | In this style, the list items are marked with squares. |
| Type “none” | In this style, the list items are not marked . |
HTML Unordered List Example
<ul>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>Output:
- HTML
- Java
- JavaScript
- SQL
ul type=”circle”
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>Output:
- HTML
- Java
- JavaScript
- SQL
ul type=”square”
- <ul type="square">
- <li>HTML</li>
- <li>Java</li>
- <li>JavaScript</li>
- <li>SQL</li>
- </ul>
Output:
- HTML
- Java
- JavaScript
- SQL
ul type=”none”
<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>Output:
- HTML
- Java
- JavaScript
- SQL
Note: The type attribute is not supported in HTML5, instead of type you can use CSS property of list-style-type. Following is the example to show the CSS property for ul tag.
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>The type attribute with CSS property</h2>
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>Output:
Leave a Reply