5

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?

  • 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 Mar 30 '17 at 5:59
1

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" />
  • Unfortunately, your example doesn't pass epubcheck. Also you can't use name as an attribute, you'll have to use id. – Nemo XXX Jun 29 '16 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.

  • That's fine, fortunately, the IDPF standard will not accept the below code while validate the HTML page. – vkfjs Jun 27 '16 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... – idiotprogrammer Jun 29 '16 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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