Proper indexing?

[galax]

Greetings,

Currently I'm in the process of creating an index, however a problem arised when it comes to reference images.

Normally an index it's created by html headers or section tags

<h2>
<section>

but when the place to index is an image it's not that clear how to use it.

I found this little post that help me use the index code:

Indexes without page numbers?

(by the way the example is wrong because it's missing the closing </a>) The post shows

<a href="#page354">

But Sigil shows errors and corrects it like this:

<a href="#page354"></a>

So let's say there's an image inside a div

<div>
<img alt="" src="../Images/imgage_01.png"/>
</div>

Where should the index tag go in order to jump to exactly that place?

a - Inside the <div> prior to the image:

<div>
<a href="#page_01"></a>
<img alt="" src="../Images/imgage_01.png"/>
</div>

b - Outside the <div>

<a href="#page_01"></a>
<div>
<img alt="" src="../Images/imgage_01.png"/>
</div>

c - Or the referencing image inside the link?

<div>
<a href="#page_01">
<img alt="" src="../Images/imgage_01.png"/>
</a>
</div>

In all these scenarios I am worried that the link tag <a> should be subject to devices default css rendering and apply some margins and rules and what not, this way upset the intended layout.

Or not, this was another question, is the linking tag <a> completely invisible during rendering? In my case I need something hidden and zero rendering.

Thanks in advance.