I am wondering if there is a correct way to markup text that is referring to a labelled diagram.

I have a diagram that has numbers on it referring to specific parts. I also have accompanying text that describes the the component parts of the image.

[![Example Diagram](https://i.stack.imgur.com/VfWXG.png)](https://i.stack.imgur.com/VfWXG.png)

Here is an example of my text:

```
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et mi dui. 
Sed bibendum vehicula dignissim(1). Etiam quis eros ac sem fermentum accumsan. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat 
volutpat. Phasellus pellentesque nulla eros, non mollis sapien consequat 
non. Aenean fringilla sem magna, vel posuere tortor auctor vel(2). Ut eget 
vehicula nunc, condimentum porttitor libero. Sed lacinia posuere quam et 
fringilla.</p>

<p>Morbi luctus fermentum justo eget euismod(3). Ut egestas quam vitae arcu 
commodo tempus. Etiam aliquet lacinia libero at mattis. Lorem ipsum dolor 
sit amet, consectetur adipiscing elit. Aliquam sit amet velit velit. Quisque
laoreet enim dolor, a sodales lorem volutpat efficitur(4). Nulla luctus libero 
purus, in laoreet dolor laoreet id. Pellentesque auctor elit id dolor 
dignissim, vitae pretium dolor pharetra. Nunc lacinia mi in nibh dictum, 
auctor maximus est vehicula. Vivamus interdum pretium luctus. Curabitur ac 
neque a massa porttitor sodales.</p>

```

My first thought was to wrap the annotations in a `<span>` but I am not certain that it is semantically correct. Is there a better option or am I ok with doing something like:

```
dignissim <span class="annotation">(1)</span>

```