HTML5 > Structures

Reverse list in HTML5

How to reverse the order of the list in HTML5?


By using <listreverse> tag we can reverse the order of the ordered list. Below is the example code for the revrse order list.

    Noraml List
    <ol>
        <li>HTML 5</li>
        <li>CSS 3</li>
        <li>jQuery</li>
        <li>.NET</li>
        <li>Java</li>
        <li>PHP</li>
    </ol>

   <hr />
    Noraml List and then continued
    <ol>
        <li>HTML 5</li>
        <li>CSS 3</li>
        <li>jQuery</li>
    </ol>
    continuing 
    <ol start="4">
        <li>.NET</li>
        <li>Java</li>
    </ol>
    <hr />

    List with type
    <ol type="a"> <!-- I, i, 1, a, 1 -->
        <li>HTML 5</li>
        <li>CSS 3</li>
        <li>jQuery</li>
        <li>.NET</li>
        <li>Java</li>
    </ol>

    <hr />
    Reverse list
    <ol reversed> <!-- I, i, 1, a, 1 -->
        <li>HTML 5</li>
        <li>CSS 3</li>
        <li>jQuery</li>
        <li>.NET</li>
        <li>Java</li>
    </ol>
    or
    <ol> <!-- I, i, 1, a, 1 -->
        <li value="5">HTML 5</li>
        <li value="3">CSS 3</li>
        <li value="4">jQuery</li>
        <li value="2">.NET</li>
        <li value="1">Java</li>
    </ol>
    <hr />
    Un ordered list
    <ul>
        <li>HTML 5</li>
        <li>CSS 3</li>
        <li>jQuery</li>
        <li>.NET</li>
        <li>Java</li>
        <li>PHP</li>
    </ul>

In the above code snippet we have ordered lists, unordered list and reverse lists.

Output

Notice the list with reversed attribute, the list numbers are in reverse order.

 Views: 917 | Post Order: 79



Write for us