How to create list in HTML, Ordered and unordered

how to create list in html

This is our fifth part of the HTML course for front-end web development. Starting with HTML is like making a skeleton of a website. and today we will learn, How To Create List In HTML, how to make a list in html types of list in html numbered list in html bulleted list in html create list in html unordered list in html definition list in html .

What is List In HTML

HTML list allows you to arrange the set of related data in a list.

Their are generally two types of list .

Ordered list

The <ol> we use to start an ordered list. The <li> tag we use to begin each list item. By default, the items on the is

  1. Apple
  2. Mango
  3. Orange
<ol>
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

Unordered list

The <ul> tag we use it to create an unordered list. The <li> tag we use it to begin each list item. Bullets (little black circles) is used to indicate the list elements by default:

  • Apple
  • Mango
  • Orange
<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ul>

HTML Tags used in List

TagDescription
<ul>Unordered list
<ol>An ordered list
<li>Defines a list item

Learn full front end web development course.

Ordered List Attribute

Ordered list attribute

To Create List In HTML we have various different types available in ordered and unordered. The global properties are also accepted by this element.

Reversed

The elements in the list are in reverse order, according to this Boolean attribute. From high to low, the items will be numbered.

<ol reversed>
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

Start

For the list elements, an integer from which to begin counting. Even if the numbering style is letters or Roman numbers, always use an Arabic numeral (1, 2, 3, etc.). Use start=”4″ to begin numbering components with the letter “d” or the Roman numeral “iv.”

  <ol start="4">
    <li>Apple</li>
    <li>Mango</li>
    <li>Orange</li>
  </ol>

Type

“I” for uppercase roman numbers.

<ol type="I">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

I. Apple
II. Mango
III. Orange

“i” for lowercase numbers in Roman numerals order.

<ol type="i">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

i. Apple
ii. Mango
iii. Orange

“A” represent uppercase alphabet order.

<ol type="A">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

A. Apple
B. Mango
C. Orange

“a” represent lowercase alphabet order.

<ol type="a">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

a. Apple
b. Mango
c. Orange

7 best cryptocurrency to start investing in 2021-22


Unordered List Attribute

Unordered list attribute in HTML

Circle

<ul type="circle">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ul>

Square

<ul type="square">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ul>

Disc

<ul type="disc">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ul>

IPhone 13 pro features, display, price is not better ?


Unordered list inside ordered list

<ol>
  <li>first item</li>
  <li>second item  
    <ul>
      <li>first subitem</li>
      <li>second subitem</li>
      <li>third subitem</li>
    </ul>
  </li>            
  <li>third item</li>
</ol>
  1. first item
  2. second item
    • first subitem
    • second subitem
    • third subitem
  3. third item

Nested List

  <ol>
    <li>Apple</li>
    <li>Mango
      <ol>
        <li>Alphonsos</li>
        <li>Kesar </li>
        <li>Badami </li>
      </ol>
    </li>         
    <li>Orange</li>
  </ol>
  1. Apple
  2. Mango
    1. Alphonsos
    2. Kesar
    3. Badami
  3. Orange

What we have learned today

We have seen the basic structure or syntax of creating list in HTML using <li>,<ol> and <ul>. Different attribute in ordered and unordered list. Nested list. Programmed in VS Code

Topic Covered Previously


Leave a Comment

Your email address will not be published. Required fields are marked *

0

Tech Info