HTML5 <figure>使用在我的情況

我應該怎麼做在這種情況下：HTML5 <figure>使用在我的情況

 <figure> 
      <a href="#" class="portfolio-item"> 
       <div class="picture"><img src="images/portfolio/recent-01.jpg" alt=""/><div class="image-overlay-link"></div></div> 
       <figcaption class="item-description"> 
        <h5>Mountain Landscapes</h5> 
        <span>Photography</span> 
       </figcaption> 
      </a> 
     </figure>

我不能用「figcaption」外「一」元素，但我想使文本區域和圖像都徘徊。也許「文章」會更好？

來源

2012-12-11 eXorcist

你在這裏有什麼問題？可以在html5中包含塊元素。 – Julian

W3C驗證器說我不能在「a」中使用「figcaption」。 – eXorcist

爲什麼不在'figure'元素周圍放置'a'元素？ – Alohci

根據您的CSS的外觀，你可以每個都包含圖像，並在不同的錨標籤的標題中，如下所示：

<figure> 
    <div class="picture"> 
     <a href="#" class="portfolio-item"> 
      <img src="images/portfolio/recent-01.jpg" alt=""/> 
      <div class="image-overlay-link"></div> 
     </a> 
    </div> 
    <figcaption class="item-description"> 
     <a href="#" class="portfolio-item"> 
      <h5>Mountain Landscapes</h5><span>Photography</span> 
     </a> 
    </figcaption> 
</figure>

或者你可以把圖片的div容器類錨或圖像標籤，這樣你就不需要包含div了。

如果你只想要一些懸停效果發生，你也可以使用CSS，並定位.picture：hover選擇器並將anchor標籤保留在figcaption上。取決於你需要什麼。

並回答你的article建議，那是什麼W3C calls syndicated content。您可以嘗試使用section，相反，它會提供一個元素，用於指定您將包含在大綱中的文檔或主題相似的文檔 - 如果您要走這條路線。

來源

2012-12-12 04:07:03

爲什麼不使用a外面的圖，如suggested by Alohchi？這是有效的：

<a href="#" class="portfolio-item"> 
    <figure> 
     <div class="picture"> 
      <img src="images/portfolio/recent-01.jpg" alt=""/> 
      <div class="image-overlay-link"></div> 
     </div> 
     <figcaption class="item-description"> 
      <h5>Mountain Landscapes</h5> 
      <span>Photography</span> 
     </figcaption> 
    </figure> 
</a>

來源

2015-12-30 00:45:31 giovannipds

我同意這一點，儘管它可能是值得一提的......因爲一個圖可以包含多個元素或圖像，例如社交媒體圖標，這可能不是最有效的。這就是說，你只能有一個figcaption，應該可能在數字元素的開頭或結尾。再次，正確的答案，但我想增加這種見解。 –

我同意你的解釋，但不同意你的例子。社交媒體圖標不應該放在這種標記上，現在還有其他更好的選擇。 – giovannipds

HTML5 <figure>使用在我的情況

回答

相關問題