Is it possible to refer to a <li> index?

Question

Is it possible to refer to a <li> index? I want to do that to be able to add/remove/reorder the <li> tags without having to manually change the reference number.

Here is an example with some made-up HTML that outlines how I think doing that could work:

<ol>
     <li>...</li>
     <li ref="some-ref">Some text that I want to refer to later ...</li>
     <li>...</li>
     <li>According to <liref ref="some-ref" />, ...</li>
</ol>

The desired output would of course be:

1. ...
2. Some text that I want to refer to later ...
3. ...
4. According to 2., ...

Is there something like this in real-life HTML?

Answer 1

HTML doesn't provide such mechanism. You need server-side or client-side scripting to achieve this.

You can also try using CSS counter properties: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

Answer 2

For what it's worth, I have accomplished what I wanted using jQuery. It doesn't answer the question directly, but can be useful to someone. It works for nested lists too.

Take this example:

<ol>
    <li>...</li>
    <li>Nested list
        <ol>
            <li>...</li>
            <li id="ref1">Some text that I want to refer to later ...</li>
            <li>...</li>
            <li id="ref2">Different text that I want to refer to ...</li>
            <li>According to <span class="ref" name="#ref2"></span>, ...</li>
        </ol>
    </li>
    <li>According to <span class="ref" name="#ref1"></span>, ...</li>
</ol>

Using this jQuery code:

$(function() {
    $('.ref').each(function() {
        var refLi = $($(this).attr('name'));
        var refLiAncestorLis = refLi.parents('li');
        var reference = '';
        for (var i = refLiAncestorLis.length - 1; i >= 0; i--) {
            reference += $(refLiAncestorLis[i]).index() + 1 + '.';
        }
        reference += refLi.index() + 1 + '.';
        $(this).text(reference);
    });
});

You can get this output:

1. ...
2. Nested list
   1. ...
   2. Some text that I want to refer to later ...
   3. ...
   4. Another text that I want to refer to ...
   5. According to 2.4., ...
3. According to 2.2., ...