HTML Unordered List

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.

<ul> Tag Attributes

HTML <ul> tag specified Unordered list display list of item and its attribute help to change the different type of list.

AttributesValueDescription
typedisk
circle
square
Disk bullet,
Circle bullet,
Square bullet
default value is “disk”.

<li> Tag Attributes

HTML <li> tag specified list items and its attribute helps to change the unorder of the list.

AttributesValueDescription
typedisk
circle
square
Disk bullet,
Circle bullet,
Square bullet
default value is “disk”.
Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> Unordered List </title>
</head>
<body>
<h2> Unordered List </h2>
<ul>
<li> Codelivly </li>
<li> Rocky </li>
<li> Code </li>
</ul>
</body>
</html>

Output

  • Codelivly
  • Rocky
  • Code

Unorder List Type Attribute

The type attribute is used to change the series type.

ValueDescription
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.

Example

<!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

  • 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.

Example

<!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

  • Harley-Davidson
  • Ducati
  • BMW

The Square Attribute

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

Example

<!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

  • 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.

Example

<!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

  • Harley-Davidson
  • Ducati
  • BMW

Leave a Comment

Your email address will not be published.