HTML List: Written Article with Video Lecture

HTML List

In this article, we are going to discuss HTML List.

List

Lists are used in every web page to create navigation menus and different products in an order. There exist following three type.

  1. Order List
  2. Un-order List
  3. Description List

in HTML List,  <li> Elements is used to define list items.

HTML List and its Type video lecture in Urdu/Hindi

HTML Order List

Elements <ol> is used to define Order List. Order list displays the items in specific order. For example the list of the subject:

  1. English
  2. Math
  3. Physics
  4. Computer
  5. Electronics

Oder List Styling

Order list can also be displayed with different list item maker. There are the different type of list item maker exist to use in the list. Type attribute can be specify with <ol> elements.

  • 1 type =  1  : Items will be numbered with Decimal (Default).
  • type = a  : Items will be numbered with Lower Case.
  • 3 type =  A  : Items will be numbered with Upper Case.
  • type =  i  : Items will be numbered with Lower Case Roman.
  • type = I  : Items will be numbered with Upper Case Roman.
Example of HTML Order List
<!--ordered list -->
<ol type="i">
<li>Computer</li>
<li>Physics</li>
<li>Math</li>
</ol>

HTML Un-Order List

Elements <ul> is used to define Un-Order List. Un-Order list displays the items without any sequence. For example the list of sports:

  • Cricket
  • Football
  • Hockey
  • Basketball
  • Archery

Un-Oder List Styling

The un-order list can also be displayed with different list item maker. There are the different type of list item maker exist to use in the list. Style attribute can be specify with <ul> elements. The CSS style attribute and list-style-type property used to define different list item maker in HTML.

[table id=2 /]
Example of HTML un-order List
<!--Un-ordered list-->
<ul style="list-style-type:none">
<li>Cricket</li>
<li>Football</li>
<li>Hockey</li>
</ul>

HTML Description List

HTML Elements <dl> is used to define description list.  Elements <dt> is used to define Description Title. <dd> elements is used to define description data.

 <!-- Description List -->
<dl>
<dt>Computer</dt>
<dd>First Description Data are to be listed here</dd>
<dt>Computer</dt>
<dd>Second Description Data are to be listed here</dd>
<dt>Computer</dt>
<dd>Third Description Data are to be listed here</dd>
</dl>

 

Example program of HTML List

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<!--Un-ordered list-->
<ul style="list-style-type:none">
<li>Cricket</li>
<li>Football</li>
<li>Hockey</li>
</ul>

<!--ordered list -->
<ol type="i">
<li>Computer</li>
<li>Physics</li>
<li>Math</li>
</ol>

<!-- Description List -->
<dl>
<dt>Computer</dt>
<dd>First Description Data are to be listed here</dd>
<dt>Computer</dt>
<dd>Second Description Data are to be listed here</dd>
<dt>Computer</dt>
<dd>Third Description Data are to be listed here</dd>
</dl>

</body>
</html>

I hope this article is really helpful. You can also learn about CSS3, Bootstrap4, PHP7, and HTML. If you have any queries, please discuss in the comment section. This is really helpful to improve performance. Thank You.

Add a Comment

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