Article
  1. Home
  2. Tutorials
  3. Article

lists in HTML

1. Ordered Lists (<ol>):

  • i) Ordered lists are used to create lists with items that have a specific order or sequence, typically represented by numbers or letters.
  • ii) Each list item is wrapped in <li> (list item) tags.
  • iii) You can specify the type of numbering or bullet style using the type attribute of the <ol> element.


Example:-

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


In this example, an ordered list is created with three list items, and each item is numbered.


Result:-

2. Unordered Lists (<ul>):

  • i) Unordered lists are used to create lists with items that do not have a specific order and are typically represented by bullet points or other symbols.
  • ii) Each list item is wrapped in <li> (list item) tags.
  • Example:-
  • <ul> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ul>

    • In this example, an unordered list is created with three list items, and each item is represented by a bullet point.

    Result:-


    3. Definition Lists (<dl>):

    • i) Definition lists are used to create lists of terms and their corresponding definitions.
    • ii) Each term is wrapped in a <dt> (definition term) tag, and each definition is wrapped in a <dd> (definition description) tag.

Example:-

<dl>

    <dt>HTML</dt>

    <dd>Hypertext Markup Language</dd>

    <dt>CSS</dt>

    <dd>Cascading Style Sheets</dd>

</dl>


In this example, a definition list is created with two terms and their corresponding definitions.

Result:-


You can also nest lists inside one another, combining ordered and unordered lists to create complex structures. For example, you can create a nested list with ordered and unordered lists as shown here:

<ol> <li>First item</li> <li>Second item <ul> <li>Sub-item 1</li> <li>Sub-item 2</li> </ul> </li> <li>Third item</li> </ol>

Result:-


In this case, the second list item contains a nested unordered list. This allows you to create hierarchical structures in your content.

Lists in HTML are essential for structuring information, creating navigation menus, and organizing content in a readable and accessible manner on web pages.