html - 更正图表引用的 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 :

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

• 来自 definition of figcaption :

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

例子:

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

在 figcaption 元素中，您可以使用任何有意义的标记。 Ben Oliver’s suggestion使用 dl 会起作用，但只使用 p 元素也可以。因为 figure 是一个分段根元素，您甚至可以使用标题。

如果您不想使用dt(如果是dl)或h2(如果是标题)作为引用number，您当然可以使用 span，但请注意，这根本没有任何意义，因此是否拥有它并没有什么区别(即，它只需要用作样式 Hook 等)。我认为没有合适的元素来标记段落中的引用编号(strong 和 b 最接近，但我认为它们不是完美匹配)。

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

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

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