WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

Unorder list

Previous Next

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

Basic Structure
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Try it yourself

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>
Try it yourself

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>
Try it yourself

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>
Try it yourself

Previous Next