Creating Ordered and Unordered list in HTML


Creating list

Listing in HTML can be done in two ways :
  1. Order listing &
  2. Unorder listing.

Order listing - <ol> :

This tag format list in order list. An ordered list starts with the <ol> tag an item in a list starts with the <li> tag.
This tag have following attributes:
AttributesDescriptionValues
start : User can change start value of listing by spacifying particular number.number
type : Type of listing can be specified here.A, a, I, i or 1.
value : Sequence of order can be change by setting this attribute value.number or alphabate
compact :Specifies that the list should render smaller than normal.compact
Eg.
<ol type="a" >
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ol>
Output :
  1. Mango
  2. Apple
  3. Banana
Another example with with changed start value and sequence:
<ol type="1" start="5" compact="compact">
<li>Mango</li>
<li>Apple</li>
<li value="11">Banana</li>
<li>Guava</li>
<li>Orange</li>
</ol>
Output :
  1. Mango
  2. Apple
  3. Banana
  4. Guava
  5. Orange
* Note start value of list is 5 and in-between sequence number is changed to 11.

Unorder listing: <ul>:

Unorder list refers to the collection of related items that have no specific order sequence.
Attributes of this tags are:
AttributesDescriptionValues
type :Set the type of list to appear.bullets, disc, circle or square.
compact :Specifies that the list should render smaller than normal.compact
Eg.
<ul type="suare" >
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ul>
Output :
  • Mango
  • Apple
  • Banana

<li> :

This tag defines an item in the list.
This tag is used in both <ol> and <ul> to define a list.
Attributes used with this tag are:
AttributesDescriptionValues
type :Set the type of list to appear.A, a, I, i, 1, bullets, disc, circle or square.
value : Sequence of order can be change by setting this attribute value.number or alphabate

You Might Also Like

0 comments

My photo
Hi. I am Ramesh Wetkoli. Three things I try to include in my blog posts are creativity, useful insights, and trendy information. IT graduate and working professional. I have leveraged 9+ years of work experience in IT industry and learnt various technologies, providing merchandizing support and handling digital marketing responsibilities.

Find us on Facebook