Правильная разметка HTML для диаграмм Ссылки

Question

Мне интересно, есть ли правильный способ разметки текста, относящегося к помеченной диаграмме.

У меня есть диаграмма с номерами на ней, относящимися к конкретным частям. У меня также есть сопроводительный текст, описывающий составные части изображения.

Вот пример моего текста:

<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> 

Моя первая мысль была, чтобы обернуть аннотаций в <span>, но я не уверен, что это семантически правильно. Есть ли лучший вариант или я в порядке с делать что-то вроде:

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

Answer 1

Вы можете использовать figure с figcaption:

• От definition of figure:

  элемент, таким образом, может быть использован для аннотирования иллюстрации, диаграммы, фотографии, код объявления и т.д.

• Из definition of figcaption:

  [...] представляет собой заголовок или условные обозначения для остальной части содержимого в figcaption элемента родительского figure элемента [...]

Пример:

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

Внутри элемента figcaption вы можете использовать любую разметку. Ben Oliver’s suggestion использовать dl будет работать, но просто имея p элементов тоже. Поскольку figure является элементом корневого секционирования, вы можете даже использовать заголовки.

Если вы не хотите использовать dt (в случае dl) или h2 (в случае заголовков) для ссылочного номера, вы можете, конечно, использовать span, но учтите, что это не передает никакого смысла, так это не имеет никакого значения, если у вас есть это или нет (т. е. он нужен только как крючок стиля и т. д.). Я не думаю, что есть соответствующий элемент для разметки ссылочного номера в параграфах (strong и b будет ближе всего, но я думаю, что они не идеальные соответствия).

Для того, чтобы соотношение из диаграммы частей описания явного, вы могли бы использовать image map:

Карта изображения позволяет геометрическая области на изображение, чтобы быть связана с гиперссылка.

map элемент содержит area элемент для каждой части, где каждый area ссылки на описание в той части (на одной странице). Поэтому вам нужно будет дать каждому описанию значение id и использовать соответствующий идентификатор фрагмента в area для ссылки на него.

Answer 2

Вы можете использовать dl, dt и dd для списка описания.

dl является родительским тегом (описание), dt является термином описания в списке и dd является термином описания.

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