HTML Lists

Lists are categorized as following,

Un-ordered List:

• First item
• Second item
• Third item
•  Fourth item

Ordered List:

    1.   First item

2.   Second item

3.   Third item

4.   Fourth item

Un-ordered HTML Lists

       An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles):

Example

<ul>

          <li>C</li>
          <li>C++</li>
          <li>Java</li>
</ul>

Unordered HTML Lists - The Style Attribute

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

Style	Description
list-style-type:disc	The list items will be marked with bullets (default)
list-style-type:circle	The list items will be marked with circles
list-style-type:square	The list items will be marked with squares
list-style-type:none	The list items will not be marked

 Sample 01

<ul style="list-style-type:disc">
          <li>C</li>
          <li>C++</li>
          <li>Java</li>
</ul>

<ul style="list-style-type:circle">
          <li>C</li>
          <li>C++</li>
          <li>Java</li>
</ul>

<ul style="list-style-type:square">
          <li>C</li>
          <li>C++</li>
          <li>Java</li>
</ul>

<ul style="list-style-type:none">
          <li>C</li>
          <li>C++</li>
          <li>Java</li>
</ul>

Check Output

Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers. For Example,

<ol>
          <li>C</li>
          <li>C++</li>
          <li>Java</li>

</ol>

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

Type	Description
type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

Sample 02

Numbered List
<ol type="1">           <li>C</li>           <li>C++</li>           <li>Java</li> </ol>	<ol type="1" start="10">           <li>C</li>           <li>C++</li>           <li>Java</li> </ol>
Uppercase Letters:	Lowercase Letters:
<ol type="A">           <li>C</li>           <li>C++</li>           <li>Java</li> </ol>	<ol type="a">           <li>C</li>           <li>C++</li>           <li>Java</li> </ol>
Uppercase Roman Numbers:	Lowercase Roman Numbers:
<ol type="I">           <li>C</li>           <li>C++</li>           <li>Java</li> </ol>	<ol type="i">   <li>C</li>   <li>C++</li>   <li>Java</li> </ol>

Check Output...

HTML Description Lists

HTML also supports description lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term: For example,

Sample 03

<dl>

          <dt>C</dt>

          <dd> - Structured Programming Language</dd>

          <dt>C++</dt>

          <dd> - Object oriented Programming Language</dd>

</dl>

Check Output

Nested HTML Lists

List can be nested (lists inside lists):

Sample 04

<h3>Diploma in Computer Application</h3>

<ol>

  <li>System Basics</li>

  <li>Windows Concepts</li>

  <li>Hardware Introduction</li>

  <li>Typing Training</li>

  <li>Ms.Office

         <ul>

                   <li>Ms.Word</li>

                   <li>Ms.Excel</li>

                   <li>Ms.Powerpoint</li>

         </ul>

  </li>

  <li>Photoshop</li>

  <li>Internet</li>

</ol>

Check Output