Answers.Body: <p>Earlier in text: </p>
  
  <pre><code>&lt;a name="header1"&gt;Header 1&lt;/a&gt;
  
  &lt;a name="header2"&gt;Header 2&lt;/a&gt;
  
  further down...
  
  &lt;ol&gt;
  &lt;li&gt;&lt;a href="#header1"&gt;item one&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#header2"&gt;item two&lt;/a&gt;&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>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).</p>
  
  <pre><code>&lt;img src="image1.jpg" id="image0001" title="this is self-closed" /&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-28T14:43:37.467Z
Answers.LastActivityDate: 2016-06-28T14:43:37.467Z
Answers.UserDisplayName: Bulrush
Answers.Body: <p>Here's a solution which does what you need: </p>
  
  <pre><code>&lt;ol&gt;
  &lt;a href="#"&gt;&lt;li&gt;&lt;/li&gt;&lt;/a&gt; 
  &lt;a href="#"&gt;&lt;li&gt;&lt;/li&gt;&lt;/a&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>(I tried putting a non-breaking space there, but it underlined the space. You could probably use css to set <strong>text-decoration: none</strong> for the <strong>a</strong> element.) </p>
  
  <p>If you want the links to go anywhere, you could replace "#" with an anchor URL.</p>
  
  <p><strong>Update:</strong> Ahh, I see that the content model doesn't allow A tag underneath OL. So my answer is wrong. </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-27T05:32:34.540Z
Answers.Text: That's fine, fortunately, the IDPF standard will not accept the below code while validate the HTML page.
Answers.UserDisplayName: vkfjs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-29T16:46:06.093Z
Answers.Text: 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...
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-27T03:31:37.193Z
Answers.LastActivityDate: 2017-03-29T16:15:58.063Z
Answers.LastEditDate: 2017-03-29T16:15:58.063Z
Answers.UserDisplayName: idiotprogrammer
Body: <p>I need a clarification regarding the link creation for <code>&lt;ol&gt;</code> list in the HTML page.</p>
  
  <p>Here is the example code for reference.</p>
  
  <pre><code>&lt;ol&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>that gives this as output:</p>
  
  <ol>
  <li>test</li>
  <li>test</li>
  </ol>
  
  <p>I need to create the links only on the numbers preceding the actual text. Is it possible?</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-03-30T05:59:20.207Z
Comments.Text: 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.
Comments.UserDisplayName: blendenzo
Tags: <html><css>
Title: Is it possible to create anchors in the numbers of an <ol> list?
UserDisplayName: vkfjs
ThreadText: # Is it possible to create anchors in the numbers of an <ol> list?
  
  (Asked by: username_0 on 2016-06-24)
  
  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?
  
  **Tags:** html, css
  
  > **Comments:**
  > **username_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.  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2016-06-28. Score: 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.
  username_3 had the syntax right, but the example did not work (for IDPF specs).
  
  ```
  <img src="image1.jpg" id="image0001" title="this is self-closed" />
  
  ```
  
  
  ---
  
  ### Answer by username_3 on 2016-06-27. Score: 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.
  
  > **Comments:**
  > **username_0**: That's fine, fortunately, the IDPF standard will not accept the below code while validate the HTML page.  
  > **username_3**: 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...  
  
  ---
  
  