更正图表参考的 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

您可以使用 dl、dt 和 dd 作为描述列表。

dl 是父标记（描述列表），dt 是列表中的描述术语，dd 是术语描述。

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

Answer 2

您可以将 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（在标题的情况下）作为参考编号，您当然可以使用span，但请注意，这根本没有任何意义，因此无论您是否拥有它都没有区别（即，它只需要用作样式挂钩等）。我认为没有合适的元素来标记段落中的参考编号（strong 和 b 最接近，但我认为它们不是完美匹配）。

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

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

每个部分的 map element contains an area 元素，其中每个 area link 到部分的描述（在同一页上）。因此，您必须为每个描述提供一个 id 值，并使用 area 到 link 中的相应片段标识符。

更正图表参考的 HTML 标记

Correct HTML Markup for Diagram References

html

diagram

semantic-markup