HTML <ul> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 11 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

List is a collection of items which are related. Lists create a well structured and easy-to-read information. In HTML there are 3 types of list available.

  1. Ordered list <ol>
  2. unordered List <ul>
  3. Description List <dl>

Unordered List Element - ul

The HTML Unordered list is a list where list items are not in any sequence or order. It is shown by default as bulleted list(•) by browser. Unordered list is used when the list items do not follow any sequence or order.

The HTML <ul> element is used to create unordered list. The <li> element is used for list items. The <ul> element can contain Zero or more <li>, <script> and <template> elements.

Syntax : 


<ul> 
  <li> item1-content </li> 
  <li> item2-content </li> 
  <li> item3-content </li> 
  <li> item4-content </li> 
</ul>

Example : 


<ul> 
  <li> Chapter-1 </li> 
  <li> Chapter-2 </li> 
  <li> Chapter-3 </li> 
  <li> Chapter-4 </li> 
</ul>

Output :

  • Chapter-1
  • Chapter-2
  • Chapter-3
  • Chapter-4


Tag Omission

The HTML <ul> element must have both start tag and end tag.

ATTRIBUTES

  1. The <ul> element only has global attributes.
  2. The compact and type attributes has been deprecated.

Important Properties

  1. Unordered list items are shown with bullet points by default. It is not limited to bullet and take several forms like as dots, circles, squares and others by using the CSS list-style-type property.
  2. To remove the marker use the CSS property list-style-type with value set to none.
  3. You can use an custom image as marker by using CSS list-style-image property.
  4. The <ul> and <ol> elements can be nested to any depth. Additionally, nesting lists can be freely alternated between <ol> and <ul> without limitations.

Frequently Asked Questions(FAQ)

How to change the bullet style of an unordered list?
You can change the bullet style of an unordered list using the CSS list-style-type property. The Possible values of this property include circle, square, disc, and none.

What's the difference between an unordered list (<ul>) and an ordered list (<ol>)?
Unordered List (<ul>) displays items with bullet points (●, ○, ■) by default. It is used when the order of items does not matter (e.g., a shopping list).
Ordered List (<ol>) displays items with numbers (1, 2, 3) or letters (A, B, C) by default. It is used when the order of items does matter (e.g., step-by-step instructions)