HTML list tags

on

HTML Lists

In HTML, lists are used to group related items together on a web page. Lists help organize content and make it easier to read and understand.

Types of Lists :

There are three types of list tags used in HTML.

1.  Ordered List ('<ol>')   

Order list displays items in a numbered sequence by default.

Example :

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

Output :

1. First item 

2. Second item

3. Third item

Generally we use it when the order of items matters.

2.  Unordered List ('<ul>')   

Un-ordered list displays items with bullet points by default.

Example :

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Cherry</li>

</ul>

Output : 

  • First item 
  • Second item
  • Third item

We use un-ordered list when the order of items does not matter.

3.  Description List ('<dl>')   

Decsription list is used for terms and their descriptions.

Example :

<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets</dd>

</dl>

Output :

HTML
HyperText Markup Language
CSS
Cascading Style Sheets


Attributes Used in HTML List Tags


HTML list tags (<ol>, <ul>, <li>, <dl>, <dt>, <dd>) can use several attributes to control their appearance and behavior. Here are the most common ones:


 <ol> (Ordered List) Attributes

1 : type :  This attribute sets the numbering type (e.g., numbers, letters, Roman numerals etc).

 It has following values : 1 (default),  A,  a,  I,  i

 Example:

    <ol type="A">

      <li>First</li>

      <li>Second</li>

    </ol>

      

2 : start : This attribute sets the starting value of the first list item.

 Example:    

<ol start="5">
      <li>Item Five</li>
      <li>Item Six</li>
 </ol>


3 : reversed : reversed attribute reverses the numbering order.

Example:

<ol reversed>
    <li>Last</li>
    <li>Second</li>
     <li>First</li>
</ol>

   

 <ul> (Unordered List) Attributes

1 : type : (deprecated in HTML5): This attribute sets the bullet style.

It has following values : disc (default), circle, square

Example:

<ul type="square">
<li>Apple</li>
<li>Banana</li>
</ul>

Note:  For modern HTML, use CSS (list-style-type) instead.


 <li> (List Item) Attributes

1: value : (only for <ol>):  It Sets the value of a specific list item.

Example:

<ol>
  <li value="10">Tenth</li>
  <li>Eleventh</li>
</ol>

    

 <dl>, <dt>, <dd> (Description List) Attributes

These tags do not have special attributes for list formatting, but you can use global attributes like class, id, and style attributes.


 Global Attributes

All list tags can use global HTML attributes such as:

  • class
  • id
  • style
  • title

Example: 

<ul class="fruits-list" id="list-id" style="color: green;">
  <li>Apple</li>
  <li>Banana</li>
</ul>

In the above example, class and id attributes are used for CSS and Javascript to add style and functionality whereas style attribute is used for adding inline style to the element.


Comments

Post a Comment