图表引用的正确HTML标记

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

我有一个图上有关于特定部分的数字。我还附有描述图像组成部分的文字。

这里是我的文字的例子：

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

来源

2016-06-24 Burgi

你可以使用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中的相应片段标识符链接到它。

来源

2016-06-24 17:32:25 unor

我真的很喜欢这个想法，并结合@ Berdesdan的'

'（我完全忘记了）的建议，我认为我可以用它做出很好的解决方案。 – Burgi

你可以使用dl，dt和dd的描述列表。

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

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

来源

2016-06-24 15:55:38 Berdesdan

这是一个很好的建议，我与其他答案相结合。 – Burgi

图表引用的正确HTML标记

回答

相关问题