Techcss
Untitled Document

HTML Lists

HTML list is an important element not only for displaying the normal list rather its huge utilisation to make interactive menu for websites just putting some punch of CSS.


Unordered List

Unordered lists are actually bulleted list and defined by <ul> tag. Three types of bullets are generally available there with "type" attribute and they are circle, disc and square.

List with no type is default unordered list which display the disc bullet.

Example:
<ul type="circle">
<li>bulleted item 1</li>
<li>bulleted item 2</li>
<li>bulleted item 3</li>
</ul>
<ul type="disc">
<li>bulleted item 1</li>
<li>bulleted item 2</li>
<li>bulleted item 3</li>
</ul>
<ul type="square">
<li>bulleted item 1</li>
<li>bulleted item 2</li>
<li>bulleted item 3</li>
</ul>
Ouput:

Ordered List

Unordered lists are actually numbered list and defined by <ol> tag. Three types of nubering are generally available there with "type" attribute and they are 1. sequence, a sequence.

List with no type is default ordered list which display the 1. sequence bullet.

Let's come to the example to clear your view.

Example:
 	 <ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ol>
<ol type="a">
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ol>
<ol type="A">
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ol>
<ol type="i">
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ol>
Output:
  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3