CODEWITHSUNDEEP
htmldiagramsemantic-markup
Burgi
Burgi

Reputation: 434

Correct HTML Markup for Diagram References

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

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>

Upvotes: 3

Views: 141

Answers (2)

Berdesdan
Berdesdan

Reputation: 359

You could use dl, dt and dd for a description list.

dl being the parent tag (description list), dt being the description term in the list and dd being the term description.

<dl>
  <dt>(1)</dt>
  <dd>explanation of (1)</dd>
  <dt>(2)</dt>
  <dd>explanation of (2)</dd>
</dl>

Upvotes: 2

unor
unor

Reputation: 96597

You could use figure with figcaption:

  • From the definition of figure:

    The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.

  • From the definition of figcaption:

    […] represents a caption or legend for the rest of the contents of the figcaption element's parent figure element […]

Example:

<figure>
  <img src="diagram.png" alt="" />
  <figcaption>
    <!-- … -->
  </figcaption>
</figure>

Inside of the figcaption element you can use whatever markup makes sense. Ben Oliver’s suggestion to use dl would work, but just having p elements is fine, too. Because figure is a sectioning root element, you could even use headings.

If you don’t want to use dt (in case of dl) or h2 (in case of headings) for the reference number, you can of course use span, but note that this conveys no meaning at all, so it makes no difference if you have it or not (i.e., it’s only needed as styling hook etc.). I don’t think there is an appropriate element for marking up the reference number in paragraphs (strong and b would come closest, but I think they are not perfect matches).

To make the relation from the diagram parts to the descriptions explicit, you could use an image map:

An image map allows geometric areas on an image to be associated with hyperlinks.

The map element contains an area element for each part, where each area links to the part’s description (on the same page). So you would have to give each description an id value and use the corresponding fragment identifier in area to link to it.

Upvotes: 3

Related Questions