Learn HTML For Beginners

HTML List

Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read. In modern web development lists are workhorse elements, frequently used for navigation as well as general content. Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document.

The HTML lists are:

  1. Unordered list:

                           It is used to group a set of related items, in no particular order.

  1. Ordered list:

                           It is used to group a set of related items, in a specific order.

  1. Description list:

It is used to display name/value pairs such as terms and their definitions, or times and events.

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets. For example see the html code below.

 <ul>
     <li>CPU</li>
     <li>Monitor</li>
     <li>Mouse</li>
     <li>Keyboard</li>
     <li>Speaker</li>
 </ul>

Here is the result of this code:

  • CPU
  • Monitor
  • Mouse
  • Keyboard
  • Speaker

Ordered List:

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. For example see the html code below.

    <ul>
        <li>CPU</li>
        <li>Monitor</li>
        <li>Mouse</li>
        <li>Keyboard</li>
        <li>Speaker</li>
    </ul>

Here is the result of this code:

  • CPU
  • Monitor
  • Mouse
  • Keyboard
  • Speaker

Description List:

A description list is a list of terms/names, with a description of each term/name. The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name). For example see the html code below.

  
    <dl>

        <dt>CPU</dt>

        <dd>- CPU stands for Central Processing Unit and it is generally 
            refered to as the brain of the computer.</dd>

        <dt>Monitor</dt>

        <dd>- The Monitor is the most commonly used output 
device on personal computers.</dd> <dt>Mouse</dt> <dd>- A mouse is an input device that rolls on a flat surface
and controls the pointer on monitor.</dd> <dt>Keyboard</dt> <dd>- Keyboard is the standard input device used to enter
textual data into the computer.</dd> <dt>Speaker</dt> <dd>- A speaker is a output device which gives us output in sound</dd> </dl>

Here is the result of this code:

CPU
- CPU stands for Central Processing Unit and it is generally refered to as the brain of the computer.
Monitor
- The Monitor is the most commonly used output device on personal computers.
Mouse
- A mouse is an input device that rolls on a flat surface and controls the pointer on monitor.
Keyboard
- Keyboard is the standard input device used to enter textual data into the computer.
Speaker
- A speaker is a output device which gives us output in sound
;