什麼HTML元素應該用於圖像下的標籤/標題？

比方說，我有一排圖像，每個圖像下應該有一個簡短的標籤或標題。什麼HTML元素應該用於圖像下的標籤/標題？

我應該使用<h3>還是<div>或其他標籤或標題？

例如：

<ul> 
    <li> 
     <img ...> 
     <h3>Iron Man</h3> 
    </li> 
    <li> ... 
    </li> 
</ul>

將它實際上依賴於3個的情況下，即，

什麼，如果標題是該網頁的內容（如鳥類和圖片的學術名稱，如「麻雀」和「雀科」），那麼<h3>可能更有意義？或
如果它只是遊戲的標題，那麼它可以是「鐵人」，「hello kitty」，「bugs bunny」等，以便它確實不意味着頁面的真實內容而僅僅用於遊戲中的一些名字，然後<div>會更加適合，或者
，如果遊戲是「凱蒂貓」，「pochacco」，「keroppi」，讓他們三麗鷗的所有字符，那麼它使用<h3>實際上在語義上更正確，因爲它們實際上表示遊戲主題的有意義名稱？

（或除<h3>和<div>，那會是更語義正確使用其他標籤？）

來源

2014-03-24 太極者無極而生

我建議使用<figure>和<figcaption>元素：

<li> 
    <figure> 
     <img src="…" /> 
     <figcaption> 
      <h3>Image Title</h3> 
      <p>some text to describe the image</p> 
     </figcaption> 
    </figure> 
</li>

但是，這是，令人難以置信的主觀。

參考文獻：

<figcaption>。
<figure>。

來源

2014-03-24 22:42:38

是的，對於（2），也不會''

「太語義」？ –

認真嗎？這是''和附帶的文字之間的語義關聯，似乎符合您制定的標準。但請注意：關於如何標記網頁內容的規則很少（如果有的話），所以如果它對您來說太「語義化」，那麼您可以自由使用它。但是你似乎在問錯誤的問題，我會建議問「這些信息及其相關的關係對用戶意味着什麼？」 –

有很多可能的方法，它們都取決於您的實際內容。這一般不能被回答。

如果標籤/標題應該是文檔大綱的一部分，那麼您需要使用標題（不一定是h3），也可能使用包含標題，圖像的切片內容元素（例如section），以及其他可能的內容。

<article> 
    <img src="…" alt="…" /> 
    <h1>…</h1> 
</article>

使用figure + figcaption（如suggested by David Thomas）在許多情況下，適當的，但不如果標籤是，應該是文檔大綱的一部分標題。由於figure是一個切片根元素，因此它具有的任何標題/部分都不會影響此輪廓。

<figure> 
    <img src="…" alt="…" /> 
    <figcaption>…</figcaption> 
</figure>

如果你想列出圖片+標題，你也可以使用dl：

<dl> 
    <dt><img src="…1" alt="…1" /></dt> <dd>…1</dd> 
    <dt><img src="…2" alt="…2" /></dt> <dd>…2</dd> 
</dl>

它也不會是錯的只是使用p（無語義/機器可讀的關係，雖然）：在原來的問題

<img src="…" alt="…" /> 
<p>…</p>

來源

2014-03-25 07:44:32 unor

什麼HTML元素應該用於圖像下的標籤/標題？

回答

相關問題