List Tag in HTML

  1. Ordered List (<ol>): This type of list is used to create a numbered list. Each list item is preceded by a number. The numbers are automatically generated by the browser.

Example:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Types of Ordered List

  1. Decimal Numbers (default): The default type is decimal numbers (1, 2, 3, …).
<ol type="1">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Result:

  1. First item
  2. Second item
  3. Third item

2. Uppercase Latin Letters:

<ol type="A">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ol>

Result: A. Apples B. Bananas C. Oranges

3. Lowercase Latin Letters:

<ol type="a">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ol>

Result: a. Red b. Green c. Blue

4. Uppercase Roman Numerals:

<ol type="I">
    <li>First point</li>
    <li>Second point</li>
    <li>Third point</li>
</ol>

Result: I. First point II. Second point III. Third point

5. Lowercase Roman Numerals:

<ol type="i">
    <li>Introduction</li>
    <li>Methods</li>
    <li>Results</li>
</ol>

Result: i. Introduction ii. Methods iii. Results

2. Unordered List (<ul>): An unordered list is used to create a bulleted list. Each list item is preceded by a bullet point or other marker, indicating an unordered sequence.

Example:

<ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

Types of Unordered List

Disc Bullets (default):

<ul type="disc">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

Result:

  • Red
  • Green
  • Blue

Circle Bullets:

<ul type="circle">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Result: ○ First item ○ Second item ○ Third item

Square Bullets:

<ul type="square">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

Result: ▪ Apples ▪ Bananas ▪ Oranges

3. Definition List (<dl>): This type of list is used to create a list of terms and their corresponding definitions. Each term is defined using a <dt> (definition term) tag, and each definition is provided using a <dd> (definition description) tag.

Example:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dt>JavaScript</dt>
    <dd>A programming language for the web</dd>
</dl>

Result:

HTML

  • HyperText Markup Language

CSS

  • Cascading Style Sheets

JavaScript

  • A programming language for the web

Leave a comment