圖表引用的正確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標記

回答

相關問題