Tutorial

Forum

Sign Up

log In

HTML
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 ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.