6

I need a clarification regarding the link creation for <ol> list in the HTML page.

Here is the example code for reference.

<ol>
<li>test</li>
<li>test</li>
</ol>

that gives this as output:

  1. test
  2. test

I need to create the links only on the numbers preceding the actual text. Is it possible?

1
  • You could look into custom list-style-type hacks. Those usually require setting the content property on the li:before pseduo-element, and I'd bet a lot of ereaders don't support that. For what you are trying to do, it would probably be easier to build out your list manually with <div>s and <p>s instead of using the list element. Then the numbers would be actual text which you could wrap with an anchor tag.
    – blendenzo
    Commented Mar 30, 2017 at 5:59

2 Answers 2

2

Earlier in text:

<a name="header1">Header 1</a>

<a name="header2">Header 2</a>

further down...

<ol>
<li><a href="#header1">item one</a></li>
<li><a href="#header2">item two</a></li>
</ol>

If you're making an EPUB book, every tag must be closed, or self-closed. idiotprogrammer had the syntax right, but the example did not work (for IDPF specs).

<img src="image1.jpg" id="image0001" title="this is self-closed" />
1
  • Unfortunately, your example doesn't pass epubcheck. Also you can't use name as an attribute, you'll have to use id.
    – user4665
    Commented Jun 29, 2016 at 21:18
0

Here's a solution which does what you need:

<ol>
<a href="#"><li></li></a> 
<a href="#"><li></li></a>
</ol>

(I tried putting a non-breaking space there, but it underlined the space. You could probably use css to set text-decoration: none for the a element.)

If you want the links to go anywhere, you could replace "#" with an anchor URL.

Update: Ahh, I see that the content model doesn't allow A tag underneath OL. So my answer is wrong.

2
  • That's fine, fortunately, the IDPF standard will not accept the below code while validate the HTML page.
    – vkfjs
    Commented Jun 27, 2016 at 5:32
  • This is very interesting. Any idea what the validation error is? I guess you're validating against HTML 5, so it may be stricter about empty elements.or bad href references... Commented Jun 29, 2016 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.