HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

  1. Ordered List or Numbered List (ol)
  2. Unordered List or Bulleted List (ul)
  3. Description List or Definition List (dl)

HTML Ordered List

If you need to add your items to the numbered list instead of dots, then the ordered HTML list will be used. This list was created using the <ol> tag. Numbering starts one at a time and increases one by one in each of the successive listings marked <li>.

Example

<ol>
     <li>Apple</li>
     <li>Orange</li>
     <li>Banana</li>
     <li>Strawberry</li>
</ol>

Output

Ordered list html

Types of Ordered List

You can use the attribute type in the <ol> tag to specify your preferred number type. By default, it is a number. The following are some options –

<ol type = "1"> - Default Numerals List
<ol type = "I"> - Upper-Case Numerals List
<ol type = "i"> - Lower-Case Numerals List
<ol type = "A"> - Upper-Case Letters List
<ol type = "a"> - Lower-Case Letters List

Example

Ordered List with Numbers
<ol type = "1">
         <li>Apple</li>
         <li>Orange</li>
         <li>Banana</li>
         <li>Strawberry</li>
 </ol>

Ordered List with Roman Numbers
<ol type = "I">
         <li>Apple</li>
         <li>Orange</li>
         <li>Banana</li>
         <li>Strawberry</li>
 </ol>

Ordered List with Lower-Case Roman Numbers
<ol type = "i">
         <li>Apple</li>
         <li>Orange</li>
         <li>Banana</li>
         <li>Strawberry</li>
 </ol>

Ordered List with Letter
<ol type = "A">
         <li>Apple</li>
         <li>Orange</li>
         <li>Banana</li>
         <li>Strawberry</li>
 </ol>

Ordered List with Lover-Case Letter
<ol type = "a">
         <li>Apple</li>
         <li>Orange</li>
         <li>Banana</li>
         <li>Strawberry</li>
 </ol>

Output

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example

<ul>
     <li>Car</li>
     <li>Bus</li>
     <li>Truck</li>
     <li>Train</li>
</ul>

Output

Unordered List

Types of Unordered List

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options −

  1. <ul type = “disc”>
  2. <ul type = “square”>
  3. <ul type = “circle”>

Example

Unordered List with Disc Type
<ul type = "disc">
     <li>Car</li>
     <li>Bus</li>
     <li>Truck</li>
     <li>Train</li>
</ul>

Unordered List with Square Type
<ul type = "square">
     <li>Car</li>
     <li>Bus</li>
     <li>Truck</li>
     <li>Train</li>
</ul>

Unordered List with Circle Type
<ul type = "circle">
     <li>Car</li>
     <li>Bus</li>
     <li>Truck</li>
     <li>Train</li>
</ul>

Output

HTML Definition or Description Lists

A defination is a list of words, with a description of each term. The <dl> tag defines a list of definitions, the <dt> tag defines the term name, and the <dd> tag defines each word.

Example

<dl> 
        <dt>HTML</dt>
        <dd>- Hyper Text Markup Language</dd>
        <dt>CSS</dt>
        <dd>- Cascading Style Sheets</dd>
</dl>

Output

Html Desription list

 

 

 

Leave a Comment

Your email address will not be published.