IndianTechnoEra: List Tag | HTML | it2Edu

Listing option show a great impression and also play a great role in notating in any blog about any explanation. The reader feels better and it is a professional way for understanding by the listing. That’s why we should list our major related things.  

HTML Listing

So in simple terms, you can provide numbered or orderly place your information as a category or subcategory, which might increase your document's readability. In this chapter, you will learn how to use lists and the different tags used in listing your data.

Different types of listing tag

HTML provides three different techniques to specify information in the form of lists. It is to be noted that every list needs to have at least one multiple data elements within it. The various forms of HTML list tags are:

 

1.) Numbering Style (Number, Roman, Alphabet) 

HTML “<ol>” tag is abbreviated as an Ordered List, which is used for ‘numbering, roman, capital and small alphabet’ lists on a web page.

Attribute types 

For Ordered List, the type can have 5 values:

1. <ol type = "1"> - Numbers, which is the default type of Ordered List
2. <ol type = "i"> - Numerals (roman) with lower caps
3. <ol type = "I"> - Numerals (roman) with upper caps
4. <ol type = "a"> - Numbering will be done in the form of Lower-case Letters
5. <ol type = "A"> - Numbering will be done in the form of upper-case Letters

Syntax:

<ol type = " Attribute Types " start = "Starting Number">

      <li> List 1 </li>

      <li> List 2 </li>

      <li> List 3 </li>

</ol>

Example:

<ol type = "I" start = "1">

      <li> Laptop </li>

      <li> Mouse </li>

      <li> USB </li>

</ol>

Demo:

1. Laptop
2. Mouse
3. USB

2.) Bullet Style (Square, Disc, Circle) 

HTML UL tag is abbreviated as an Unordered List, which is used for listing your items via bullets (square, disc and circles) types.

Attribute types 

For unordered lists also, there are three symbols which will acts as bullets for your lists.

These three values can be used for type attribute of <ul>

1. <ul type = "square"> - Bulleting using a filled square
2. <ul type = "disc"> - Bulleting using a filled circle
3. <ul type = "circle"> - Bulleting using a empty circle

Syntax:

<ul type = " Attribute Types ">

      <li> List 1 </li>

      <li> List 2 </li>

      <li> List 3 </li>

</ul>

 

Example:

<ul type = "square">

      <li> Laptop </li>   

      <li> Mouse </li>

      <li> USB </li>

</ul>

 Demo:

Square

• Laptop
• Mouse
• USB

Disc

• Laptop
• Mouse
• USB

Circle

• Laptop
• Mouse
• USB

3.) Definition List (Listing & Sub-Listing ) 

HTML dl tag is abbreviated as a Definition List, which is used for arranging your data items like the way items remain arranged in any dictionary.

In this type of data listing, the data are arranged or listed like that of a dictionary or encyclopedia. It is used on the last page of your site to provide the glossary or arrange a set of definitions.

It takes the help of two more tags called as:

1. <dt> - a definition terminology and
2. <dd> - definition description.

Syntax:

<dl>  <dt> List 1 </dt>

            <dd> Sub-List 1.1 </dd>

            <dd> Sub-List 1.2 </dd>

      <dt> List 2 </dt>

      <dt> List 3 </dt>

</dl>

Example:

<dl>  <dt> Mobile </dt>

            <dd> Vivo </dd>

            <dd> Samsung </dd>

      <dt> Laptop </dt>

      <dt> Tabs </dt>

</dl>

 Demo without numbering: 

Mobile

Vivo

Samsung

Laptop

Tabs

Demo with numbering:

Mobile

1. Vivo
2. Samsung

Laptop

Tabs

Code of "Demo with numbering"

<ol type = "I" start = "1">

<dl>  

<li><dt> Mobile </dt></li>

           <ol type = "A" start = "1"> 

<li> <dd> Vivo </dd> </li>

<li> <dd> Samsung </dd> </li>

</ol>

<li><dt> Laptop </dt> </li>

    <li><dt> Tabs </dt> </li>

</dl>

</ol>