Advertisement
Google Ad Slot: content-top
Unorder list
An unordered list in HTML is used to display a list of items where the order doesn't matter. It's created using the <ul> (unordered list) tag, and each item within the list is placed inside an <li> (list item) tag
Common list-style-type Values:
| Attribute Value | Description |
|---|---|
| disc | Filled circle (default) |
| circle | Hollow circle |
| square | Square |
| none | No bullets |
Example
<ul style="list-style-type: square;">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<ul style="list-style-type: circle;">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<ul style="list-style-type: disc;">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<ul style="list-style-type: none;">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
Nested Lists:
Unordered lists can be nested inside each other to create sub-lists.
Example
<ul>
<li>Fruit
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
Styling with CSS Classes:
For more control over styling, you can use CSS classes.
Example
<head>
<style>
.custom-list {
list-style-type: none;
padding: 0;
}
.custom-list li::before {
content: "✔️";
padding-right: 8px;
}
</style>
</head>
<body>
<ul class="custom-list">
<li>Item One</li>
<li>Item Two</li>
</ul>
</body>