HTML Unordered List

HTML Unordered List is used to group a set of related items in Unordered List. Unordered List displays elements in bulleted format. The HTML <ul> tag is used for unordered list. HTML Ordered List is also called as HTML Bulleted List.

An unordered list can not be displayed in any particular order. There can be 4 types of Bulleted list as below.

  1. disc
  2. circle
  3. square
  4. none

There are 4 types of attributes in <ul> tag to display unordered lists.

Types of attributes in <ul> tag
Type Description
type="disc" This is the default type. The list items will be displayed with bullets.
type="circle" The list items will be displayed with uppercase circles.
type="square" The list items will be displayed with lowercase squares.
type="none" The list items will be displayed with no any marker.

 

Syntax for Unordered List or BulletedList (ul) :

<ul type="circle">  
 <li>Item 1</li>  
 <li>Item 2</li>  
 <li>Item 3</li>  
 <li>Item 4</li>  
</ul>  

Let's see below example to understand HTML unordered Lists or Bulleted lists in details.

Example :

<!DOCTYPE html>
<html>
<head>
<title>Learn HTML Unordered Lists or Bulleted List by aryatechno</title>
</head>
<body>

<p><h3>Display Unordered or Bulleted List for online tutorials with bullets</h3></p>
<p>
<ul type="disc">
<li>PHP</li>
<li>HTML</li>
<li>MYSQL</li>
<li>CSS</li>
</ul>
</p>


<p><h3>Display Unordered HTML List for online tutorials wirh circles</h3></p>
<p>
<ul type="circle">
<li>PHP</li>
<li>HTML</li>
<li>MYSQL</li>
<li>CSS</li>
</ul>
</p>

<p><h3>Display Ordered HTML List for online tutorials with squares</h3></p>
<p>
<ul type="square">
<li>PHP</li>
<li>HTML</li>
<li>MYSQL</li>
<li>CSS</li>
</ul>
</p>

<p><h3>Display Unordered HTML List for online tutorials with not marked</h3></p>
<p>
<ul type="none">
<li>PHP</li>
<li>HTML</li>
<li>MYSQL</li>
<li>CSS</li>
</ul>
</p>

</body>
</html>

Output :

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

58183