List Manipulation in HTML


See the very simple example of List Manipulation in HTML. reversed and start is the HTML attribute is used to manipulate the indexing order of an ordered list.

List Manipulation in HTML

1. reversed

It’s a boolean attribute changes the indexing order in descending (5, 4, 3, …), instead of ascending (1, 2, 3…).

<ol reversed>
    <li>Java</li>
    <li>Spring Boot</li>
    <li>React</li>
    <li>Angular</li>
</ol>

Output

4. Java
3. Spring Boot
2. React
1 .Angular

2. start

The start attribute specifies the start value of the first list item in an ordered list.

<ol start="151">
    <li>Java</li>
    <li>Spring Boot</li>
    <li>React</li>
    <li>Angular</li>
</ol>

Output

151. Java
152. Spring Boot
153. React
154. Angular

Complete HTML code is:

<html>
<head>
    <title>HTML List Manupulation</title>
</head>
<body>

    <h3>Reverse List Item Indexes</h3>
    <ol reversed>
        <li>Java</li>
        <li>Spring Boot</li>
        <li>React</li>
        <li>Angular</li>
    </ol>

    <h3>Start List Index At 11</h3>
    <ol start="151">
        <li>Java</li>
        <li>Spring Boot</li>
        <li>React</li>
        <li>Angular</li>
    </ol>

</body>
</html>

References

  1. HTML- Introduction to Hypertext Markup Language
  2. How to blink text in HTML using jQuery
  3. <ol>: The Ordered List element

Similar Posts

About the Author

Atul Rai
I love sharing my experiments and ideas with everyone by writing articles on the latest technological trends. Read all published posts by Atul Rai.