Ordered & Unordered Lists in HTML5

How to create ordered / unordered lists in HTML5?

Lists:

Lists are of two types they are

Ordered lists
Unordered list

Ordered list:

In order to create the order list we need to use <ol>.

 <ol>
        <li>Mango</li>
        <li>Banana</li>
        <li>Guava</li>
    </ol>

In the above code snippet we created the lists using <ol> tag In order to create the ordered list we need <ol> and <li>.

output

Reversed order list:

It is used to reverse the order list

<h3>Reversed order list</h3>
    <ol reversed>
        <li>Mango</li>
        <li>Banana</li>
        <li>Guava</li>
        </ol>

Reversed order list

In the above code snippet we have defined how to create the list in reversed order we need to add the <ol> tag as reversed

output

Lists using Uppercase roman numbers:

Lists using upper case roman numbers are used to start the list with the roman numbers.

<h3>Uppercase roman numbers</h3>
    <ol type="I">
        <li>Mango</li>
        <li>Banana</li>
        <li>Guava</li>
        </ol>

List with uppercase roman number

In the above code snippet we have defined the lists with upper case roman numbers we use

<ol type="I"> - to define the uppercase roman numbers

output

List with Lowercase roman number:

It is used to assign the list with lowercase roman number

 <h3>Lowercase roman numbers</h3>
    <ol type="i">
        <li>Mango</li>
        <li>Banana</li>
        <li>Guava</li>
        </ol>

List with lowercase number

In the above code snippet we have defined the lists with upper case roman numbers we use

<ol type="i"> - To define the lowercase roman numbers

output

List with Alphabets:

List with alphabets is used to place the alphabets

<h3>Lists with alphabets</h3>
    <ol type="A">
        <li>Mango</li>
        <li>Banana</li>
        <li>Guava</li>
        </ol>

List with alphabets

In the above code snippet we have defined the lists with alphabets numbers we use

<ol type=A> - Defines the list with uppercase alphabets

output

Lists with lowercase Alphabets:

List with lowercase alphabets is used to place the lowercase alphabets

<h3>Lists with lowercase alphabets</h3>
    <ol type="a">
        <li>Mango</li>
        <li>Banana</li>
        <li>Guava</li>
        </ol>

List with lowercase alphabes

In the above code snippet we have defined the lists with alphabets numbers we use

<ol type="a"> - Defines the list with lowercase alphabets

output

List continuing :

It is used to add the continuing list

<h3>List continuing</h3>
    <ol>
        <li>Mango</li>
        <li>Banana</li>
        <li>Guava</li>
        </ol>
    <ol start="4">
        <li>apple</li>
        <li>pine apple</li>
        <li>orange</li>
    </ol>

List continuing

In the above code snippet we have defined the lists continuing we use

<ol start> - It is used continue the list.

output

Unordered list

These are also called as Bullest list which is used by <ul> tag

 <h3>Unordered list</h3>
    <ul>
        <li>WebProgramming</li>
        <li>HTML5</li>
    </ul>

Unordered list

In the above code snippet we have created the bullet list using <ul>

output

Unordered list with Types:

It creates the lists with different types

<h3>Unordered list with types</h3>
    <ul type="circle">
        <li>WebProgramming</li>
        <li>HTML5</li>
    </ul>
    <ul type="square">
        <li>WebProgramming</li>
        <li>HTML5</li>
    </ul>
    <ul type="bullet">
        <li>WebProgramming</li>
        <li>HTML5</li>
    </ul>

unordered list with types

In the above code snippet we have different types of unordered list. <ul> as circle, square, bullet

output