Techoceanhub logo

Lists (ordered and unordered) in HTML

In HTML, you can create both ordered and unordered lists using the <ul> and <ol> elements, respectively. Here’s how you can create each type of list:

Unordered List: An unordered list is a list of items that do not have a specific numerical or sequential order. By default, unordered lists are displayed with bullet points.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

The <ul> element is used to create an unordered list, and each list item is defined using the <li> element. Place the content of each item between the opening and closing <li> tags.

Ordered List: An ordered list is a list of items that have a specific numerical or sequential order. By default, ordered lists are displayed with numbers.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Similar to unordered lists, you can use the <ol> element to create an ordered list. Each list item is defined with the <li> element, and the content of each item is placed between the opening and closing <li> tags.

Nested Lists: You can also nest lists within each other to create hierarchical structures.

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

In the example above, a nested unordered list is created by placing another <ul> element within an <li> element. Similarly, you can nest ordered lists by using the <ol> element.

These examples demonstrate how to create basic ordered and unordered lists in HTML. You can further customize the appearance of the lists using CSS or by applying predefined styles from CSS frameworks.

Share:

Categories

Archives

Related Posts

Array Destructuring

Array Destructuring Array destructuring is a powerful syntax introduced in ES6 that allows you to unpack elements from an array

Read More »

Explore our Affiliated partner links

hostgator website plan

Hostgator

Best Website hosting plans & Best for 24/7 support.

hostinger webhosting plan

Hostinger

Reasonable website hosting packages for small business & 24/7 Email support

Elementor pro

Design Worpdress website quickly using Elementor Builder and AI

buy elementor website templates

Buy Elementor Website Template

Buy ready made Elementor Website Template from us & Get Free Elementor pro licence for 1 year .