Advertisement

Advertisement


Unordered List

An unordered list is a collection of related items that are listed with no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet. Each item starts with <li> tag.

Look at the example below to understand how to use unorder list :


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List </title>
</head>
<body>
<h2> Unordered List </h2>
<ul>
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

Output

HTML Unordered Lists Example
  • Harley-Davidson
  • Ducati
  • BMW

Unorder List Type Attribute

The type attribute is used to change the series type.

Value Description
type="disc" Sets the list item marker to a bullet (default).
type="circle" Sets the list item marker to a circle.
type="square" Sets the list item marker to a square.
type="none" The list items will not be marked.

The Disc Attribute

The 'Disc' as type - <ul type="disc">. These list items will be marked with small black circles like bullets. This is the default type in unorder lists.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Disc Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="disc">
<li> Harley-Davidson </li>
<li> Ducati</li >
<li> BMW </li>
</ul>
</body>
</html>

Output

HTML Unordered List Disc Attribute Example
  • Harley-Davidson
  • Ducati
  • BMW

The Circle Attribute

The 'Circle' as type - <ul type="circle">. It will display round hollow circles like bullets before list items.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Circle Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="circle">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

Output

HTML Unordered List Circle Attribute Example
  • Harley-Davidson
  • Ducati
  • BMW

The Square Attribute

The 'square' as type - <ul type="square">. It will display filled squares before the list items.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Square Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="square">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

Output

HTML Unordered List Square Attribute Example
  • Harley-Davidson
  • Ducati
  • BMW

The none Attribute

The 'none' as type - <ul type="none">. This attribute will list the list items but will not put any bullets before them.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List None Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="none">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

Output

HTML Unordered List None Attribute Example
  • Harley-Davidson
  • Ducati
  • BMW

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<ul>
Yes
Yes
Yes
Yes
Yes









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.