TutorialLab
html list

HTML Lists

HTML List:

Today we will discuss about HTML list.Basically HTML have three types of list.We can show our data/information in sequence using HTML list.Following are HTML lists Types:

1 Unorder List

2 Order List

3 Data List

Example Of HTML Lists:

1: Unorder List Example

Unorder List start from <ul> tag and end with </ul> tag.All list item will be in <li> … </li> tag.

<ul>
<li>Fruits</li>
<li>Mangoe</li>
<li>Orange</li>
<li>Apple</li>
<li>Banana</li>
<li>Peach</li>
</ul>

2: Order List Example

Order List start from <ol> tag and end with </ol> tag.All list item will be in <li> … </li> tag.

<ol>
<li>Fruits</li>
<li>Mangoe</li>
<li>Orange</li>
<li>Apple</li>
<li>Banana</li>
<li>Peach</li>
</ol>

3: Data List Example

Data List start from <dl> tag and end with </dl> tag.All data term will be in <dt> … </dt> tag and all data term definition will be in <dd> … </dd> tag.

<dl>
<dt>Data List</dt>
<dd>Data Definition</dd>
<dt>Pakistan</dt>
<dd>Pakistan is our country</dd>
<dt>Swat</dt>
<dd>Swat is the beautiful valley of pakistan</dd>
</dl>

Order List The type attribute

A type attribute can be added to an ordered list, to define the type of the marker:

Type
type=”1″
type=”A”
type=”a”
type=”I”
type=”i”
 <ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Unorder List The style attribute

A style attribute can be added to an unordered list, to define the style of the marker:

Style
list-style-type:disc
list-style-type:circle
list-style-type:square
list-style-type:none
 <ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Previous Lecture Next Lecture

Aizaz Ali

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.