×

Html & Html5

The World's best Software Development Study Portal

HTML List


All lists contain one or more list items.There are differnt type of list in Html.


  1. Unordered list
  2. Ordered list
  3. Description list

Unordered List


An unordered list is that in which order of list does't matter.It start with ul tag and all list items specified inside li tag.
Different type of list item marker use in unorder list as follows:-


  • disc-set list item to bullet
  • circle-set list item to circle
  • square-set list item to square
  • none-list item will not be marked

Example-disc


<h2> Unordered List with Disc Bullets </h2>
<ul style="list-style-type:disc">
<li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
<ul>

Output:




Example-circle


<h2> Unordered List with circle Bullets </h2>
<ul style="list-style-type:circle">
<li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
<ul>

Output:




Example-square


<h2> Unordered List with square Bullets </h2>
<ul style="list-style-type:square">
<li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
<ul>

Output:




Example-none


<h2> Unordered List with none Bullets </h2>
<ul style="list-style-type:none">
<li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
<ul>

Output:




Ordered List


An ordered list is that in which order of list matter.It start with ol tag and all list items specified inside li tag.
Ordered List-List item marker

Different type of list item marker use in Order list are as follows-


  • Numbers-set list item mark with number
  • Uppercase letter-list item mark with uppercase letter
  • lowercase letter- list item mark with lowercase letter
  • Uppercase Roman no.-list item mark with uppercase Roman no.
  • lowercase Roman no.-list item mark with lowercase Roman no.

Example-Numbers


<h2> Unordered List with Numbers Bullets </h2>
<ul style="list-style-type:Numbers">
<li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
<ul>

Output:




Example-Uppercase letter

<h2> Ordered List with Uppercase letter Bullets </h2>
<ol type="A"> <li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
<ul> <ol >

Output:




Example-Lowercase letter


<h2> Ordered List with Lowercase letter Bullets </h2>
<ol type="a"> <li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
<ul> <ol >

Output:




Example-Uppercase Roman No.


<h2> Ordered List with Uppercase Roman No. </h2>
<ol type="I"> <li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
<ul> <ol >

Output:




Example-Lowercase Roman No.


<h2> Ordered List with Lowercase Roman No. </h2>
<ol type="i"> <li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
<ul> <ol >

Output:



Description List

HTML description list displays element in definition form.Following tags used to define description list


  1. dl tag define description list
  2. dt tag define description term
  3. dd tag define description data

Example-


<dl>
<dt> Matter </dt>
<dd>Anything that occupies space and have mass</dd>
</dl>

Output: