HTML UL- Unordered List

HTML UL is the list of items which belong to same category or genre without any order. The List elements do not have a sequence and each list element is preceded by a graphic icon called a bullet. A bullet may look like a filled circle, empty circle, a square or any other graphic symbol.

Syntax of HTML UL

An unordered list in a web page is created by using <UL ></UL> tags. All the strings or values in the list must be included in this <UL> Tag within <LI></LI> List item tags.

<UL attribute-value pairs>
<LI>list item 1</LI>
<LI>List Item 2</LI>
</UL>

Features of HTML UL

  • <UL> is compulsorily a paired tag. All elements created with <LI></LI> must be enclosed within <UL> and </UL>.
  • Multiple Unordered lists can be added in a web page. If you need to manipulate the HTML UL with a script, each unordered list must be given a unique ID.
  • Any number of list elements can be added using <LI></LI> paired tags.
  • The formatting of the whole unordered list can be done by setting the relevant attributes in <UL> opening tag
  • An individual element can be separately formatted using attributes in individual <LI> tags
  • You can change the bullet of the list elements by defining the type of bullet. It can also be a graphic icon defined in the STYLE attribute or using a CSS class.

Attributes of HTML UL list

The unordered list has following attributes to be applied to all the list elements

ID

This attribute value gives identification to an unordered list. You can give an alphanumeric string as the identification of an unordered list. The ID value should be unique for a web page. This ID can be used in a script to manipulate it.

CLASS

This attribute is used to associate an unordered list with a class defined in a style sheet associated with the page or website. The style sheet element specifies the consistent style for multiple lists in a web page.

STYLE

If you want to add additional styling to an unordered list, style attribute is used. You can set styles in a string form with CSS element and value pairs separated by semicolons.

TITLE

Title attribute is used to set tooltip text for an unordered list. When the user rests the mouse cursor on an unordered list, a value assigned to TITLE attribute appears in a small outlined box.

DIR

DIR means direction. This attribute is used set the direction of the non aligned unordered list. Possible values are LTR for left to right or RTL for right to left.

TYPE

This attribute is used to define the type of bullet to be used for an unordered list. The Type attribute can have Square, Circle or Disc (default) values for an unordered list. You can set an image as bullet using STYLE attribute.

Example of HTML UL

<TITLE> Welcome to CSVeda.com </TITLE>
<HTML>
<BODY >
<H3 ALIGN="CENTER">Using Unordered List in Websites</H3>
<UL Type="square">
<LI>Programming in C</LI>
<LI>Programming in Python</LI>
<LI>Java Programming</LI>
</UL>
<UL Type="circle" DIR="RTL" TITLE="Right Aligned List with verdana font" STYLE="font-family:Verdana">
<LI>Operating Systems</LI>
<LI>Computer Networks</LI>
<LI>Artificial Intelligence</LI>
</UL>
<UL Type="disc">
<LI STYLE="font-family:Calibri">Oracle</LI>
<LI STYLE="font-family:Verdana">MySQL</LI>
<LI STYLE="font-family:Times New Roman">PostGreSQL</LI>
</UL>
</BODY>
</HTML>
HTML UL example