title: What is the best semantic way to approach this design: a list of articles where the image header uses an image from the latest entry?
body: <p>This is a design of an article list under the category "News":</p>
  
  <p><a href="https://i.imgur.com/IisNl8y.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/IisNl8y.png" alt="An image with the text overlay &#39;News&#39;, followed by 4 article teasers and a &#39;see more&#39; link"></a></p>
  
  <p>The top image is actually the featured image of the latest article (in this case, it's "Hilary Presents Herself..."'s featured image). If someone publishes a new article, the top image will change.</p>
  
  <p>So, technically, to keep it semantic, I make the HTML element looks something like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;section&gt;
     &lt;h1&gt;News&lt;/h1&gt;
     &lt;ul&gt;
        &lt;li&gt;
          &lt;figure&gt;
          &lt;img src="image.jpg" class="entry-image"/&gt; &lt;!-- notice the image --&gt;
          &lt;/figure&gt;
          &lt;h2&gt;Entry title&lt;/h2&gt;
          &lt;span&gt;Category / 01 Jan 2016&lt;/span&gt;
        &lt;/li&gt; 
        &lt;li&gt;
          &lt;h2&gt;Entry title&lt;/h2&gt;
          &lt;span&gt;Category / 01 Jan 2016&lt;/span&gt;
        &lt;/li&gt; 
        &lt;li&gt;
          &lt;h2&gt;Entry title&lt;/h2&gt;
          &lt;span&gt;Category / 01 Jan 2016&lt;/span&gt;
        &lt;/li&gt; 
        &lt;li&gt;
          &lt;h2&gt;Entry title&lt;/h2&gt;
          &lt;span&gt;Category / 01 Jan 2016&lt;/span&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Problem is, with this HTML structure, I have to position the article's featured image outside of its flow (using <code>position: absolute</code>) and that could make the design wonky.</p>
  
  <p>It would be safer to use this structure:</p>
  
  <pre><code>&lt;section&gt;
     &lt;figure&gt;
     &lt;img src="image.jpg" class="entry-image"/&gt; &lt;!-- image is now here --&gt;
     &lt;/figure&gt;
     &lt;h1&gt;News&lt;/h1&gt;
     &lt;ul&gt;
        &lt;li&gt;
          &lt;h2&gt;Entry title&lt;/h2&gt;
          &lt;span&gt;Category / 01 Jan 2016&lt;/span&gt;
        &lt;/li&gt; 
        &lt;li&gt;
          &lt;h2&gt;Entry title&lt;/h2&gt;
          &lt;span&gt;Category / 01 Jan 2016&lt;/span&gt;
        &lt;/li&gt; 
        &lt;li&gt;
          &lt;h2&gt;Entry title&lt;/h2&gt;
          &lt;span&gt;Category / 01 Jan 2016&lt;/span&gt;
        &lt;/li&gt; 
        &lt;li&gt;
          &lt;h2&gt;Entry title&lt;/h2&gt;
          &lt;span&gt;Category / 01 Jan 2016&lt;/span&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>So I don't have to use <code>position: absolute</code> to have it on top of the list. However, I'm not sure if it's semantic. Because the top image is actually the latest article's image, not the category's image (not the News' image).</p>
  
  <p>What is the best way to approach this?</p>