Types of lists in HTML

Types of lists in HTML

Types of lists in HTML

There in our last few articles we’ve studied most of html codes and now you can start your basic practice with html codes. We will discuss more things in detail and will provide complete knowledge to deal with html coding.

Here in this article we will discuss about types of list in html. We have three types of lists in html coding and each of them have their own significance and application, they are:

  1. Definition list
  2. Ordered list
  3. Unordered list

So, first starting with definition list, it is used to give some points on any keyword or any phrase. In normal a definition list is coded like this:

<dl>

<dt>School</dt>

<dd>Place where children go to study</dd>

<dd>It’s a big premises</dd>

<dt>Two wheelers</dt>

<dd>A number of examples like, motorcycle, scooter etc</dd>

<dd>You must wear helmet while driving a two wheeler.</dd>

</dl>

Here the definition list ends. In above coding, dl represends definition list and it must be closed with tags at last. In browsers it will appear like this:

<———————————————->

School
Place where children go to study
It’s a big premises
Two wheelers
A number of examples like, motorcycle, scooter etc
You must wear helmet while driving a two wheeler.
<———————————————->

Now go to ordered list, order list is quite same like definition list but have few differences in coding and front view, now look upon the coding in orderlist:

<ol>

<li>School</li>

<li>Two wheelers</li>

<li>Four wheelers</li>

</ol>

 

Here ol represents ordered list and li represents list items, also need to close the tag at then end. This ordered list looks different in front end user screen so it have other application and uses, now visit how it looks like in browsers,

<———————————————->

  1. School
  2. Two wheelers
  3. Four wheelers

<———————————————->

The last one comes unordered list, this one is quite similar in coding as like ordered list but as said it looks different with bullet buttons on the front end and have different application, so look upon the coding of unordered list:

<ul>

<li>School</li>

<li>Two wheelers</li>

<li>Four wheelers</li>

</ul>

Here it ends and now you can visit how it looks like on front end:

<———————————————->

  • School
  • Two wheelers
  • Four wheelers

<———————————————->

Here ends the list in html, you can add much more data in all lists just maintain the coding sequence like above. Our experts are ready to assist you through your comments on below form.

  • Was this Helpful ?
  • Yes   No

Leave a Reply

Your email address will not be published. Required fields are marked *