html - 更正图表引用的 HTML 标记

标签 html diagram semantic-markup

我想知道是否有正确的方法来标记引用标记图表的文本。

我有一张图表,上面有数字表示特定部分。我还有描述图像组成部分的附带文本。

Example Diagram

这是我的文本示例:

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

最佳答案

您可以将 figurefigcaption 一起使用:

  • 来自 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 等)。我认为没有合适的元素来标记段落中的引用编号(strongb 最接近,但我认为它们不是完美匹配)。

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

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

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

关于html - 更正图表引用的 HTML 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38017053/

相关文章:

html - 无法根据导航栏中的文本长度扩展下拉菜单背景

c++ - 用于模板继承的UML图

javascript - 如何向 WebStorm UML 图中添加或删除元素

html - 用文本包裹 anchor 元素

forms - HTML5 中用于输入的占位符 VS 标签

javascript - 使用 CSS Transition 在加载时滑动一个 div

html - 如何防止 webkit-scrollbar 推过 div 的内容?

html - 当文档大纲中的位​​置不可知时使用哪个标题级别?

javascript - 如何在 HTML 中加载图像,如 iPad 网站从左向右滑动

diagram - Visio 是软件开发草图的标准?