正确的图表参考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（如果是标题）作为参考号，您当然可以使用{{ 1}}，但请注意，这根本没有任何意义，所以如果你有或没有它没有区别（即它只需要造型钩等）。我不认为在段落中标记参考号是合适的元素（span和strong最接近，但我认为它们不是完美的匹配。）

要使图表部分与描述之间的关系明确，您可以使用image map：

  

图像映射允许图像上的几何区域与超链接相关联。

map元素包含每个部分的area元素，其中每个b链接到部分的描述（在同一页面上）。因此，您必须为每个描述赋予area值，并使用id中相应的片段标识符链接到该值。

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>