在<article>中，<figure>可以在<header>之內嗎？

比方說，我有這個，在<article>中，<figure>可以在<header>之內嗎？

<article> 
    <header> 
     <h1>Article title</h1> 
     <p>Article kicker</p> 
     <figure> 
      <img class="featured-image" src="http://article.com/featured/image.jpg"> 
     </figure> 
    </header> 
    <div class="content"> 
     <p>Bla bla</p> 
     <p>Bla bla</p> 
    </div> 
    <footer> 
     <p>About author</p> 
    </footer> 
</article>

它是語義正確的把裏面的<header><figure>？

該規範定義<figure>如，

的內容的單元，任選地與一個標題，即是自包含的，，其通常引用作爲單個單元從文檔主流動

如果把裏面<header>將是使<figure>屬於<article>的頭部，而不是屬於<article>本身？試圖環顧四周，但我還沒有找到答案。

來源

2016-12-26 deathlock

小細節，但你缺少一個figcaption，因爲你的img沒有alt屬性。 – BoltClock

@BoltClock有趣。但是，這並不妨礙這個人物在形象和形象上都具有正確性？ – deathlock

不，你仍然可以同時擁有 - figcaption提供了圖像的描述，而alt文本的目的是作爲圖像不可用時的文本替換。它們可以是相同的文本，也可以是不同的，具體取決於您希望如何反映替代文本。看到一個例子在這裏：https://www.w3.org/TR/html5/embedded-content-0.html#images-that-include-text – BoltClock

該數字仍然是文章的一部分。它恰好在文章標題中，如果您的圖形實際上是文章標題的一部分而不是文章的主要內容，那很好。

如果您在分區方面提出要求，<header>和<footer>不是分區元素，因此該數字仍然是文章大綱的一部分。也就是說，刪除或註釋掉<header>和<footer>標籤：

<article> 
    <!-- header --> 
     <h1>Article title</h1> 
     <p>Article kicker</p> 
     <figure> 
      <img class="featured-image" src="http://article.com/featured/image.jpg"> 
     </figure> 
    <!-- /header --> 
    <div class="content"> 
     <p>Bla bla</p> 
     <p>Bla bla</p> 
    </div> 
    <!-- footer --> 
     <p>About author</p> 
    <!-- /footer --> 
</article>

產生相同的輪廓。

來源

2016-12-26 05:30:22 BoltClock

感謝澄清！我猜想精選圖片應該位於標題中，而不是文章內容中。 – deathlock

@deathlock：聽起來正確。我不知道我是否看過圖元中的精選圖片。但這取決於你。 – BoltClock

這是爲什麼？是否因爲特色圖片不能被帶走？ – deathlock

在<article>中，<figure>可以在<header>之內嗎？

回答

相關問題