Like the ordered lists, the unordered or bulleted lists are also used to present the data in a more meaningful, readable and understandable way. Unlike the ordered lists the unordered ones puts a bullet instead of a number or alphabet in front of every list item. The HTML tags used to create the unordered lists are <UL>…</UL>. Unordered lists can also be used in a variety of styles. By default most of the web browsers use bullets to delineate unordered list items. Some text browsers such as Lynx put an asterisk sign before the unordered list item.
Example code for creating an unordered list:
<UL>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>
The output of the above code will be as follows:
- Content
- Resume
- E-Book
- Blogs
- SEO
- SMO
Instead of simple bullets we can also use other symbols as far as they are supported by the web browser. In order to accomplish this we have to use ‘TYPE’ attribute with the <UL> HTML tag. For example:
<UL TYPE=”SQUARE”>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>
Using the above HTML code we will get the following output:
- Content
- Resume
- E-Book
- Blogs
- SEO
- SMO
We can also use different types of symbols in the same unordered list and ordered list with the bulleted one. A sub-list under a main list can also be created. This process is popularly known as nesting of lists and such kind of lists are called ‘Nested Lists’. Below is a comprehensive example of a nested list which consists of both the numbered and bulleted styles.
HTML Code:
<HTML>
<OL TYPE=”I” START=”V”>Guess what we will be discussing today?
<OL TYPE=”1”>
<LI> Its all about vegetables </LI>
<OL TYPE=”A”>
<LI> Carrot
<UL>
<LI> Its red in color </LI>
</UL>
<LI> Tomato </LI>
<UL TYPE=”CIRCLE”>
<LI>Its also red in color </LI>
</UL>
<LI> Potato </LI>
<UL TYPE=”SQUARE”>
<LI> It’s the odd one out as it is brown in color </LI>
</UL>
</OL>
</OL>
</OL>
</HTML>
In this way we can try infinite combinations of tags to design our lists. Nested lists can be made more beautiful if non-breaking spaces i.e. < & nbsp > is used. It will increase indents and the sub-lists will be easily presented under the main ones.