处理此设计的最佳语义方式是什么：图像标题使用最新条目中的图像的文章列表？

Question

这是“新闻”类别下的文章列表设计：

顶部图片实际上是最新文章的特色图片（在这种情况下，它是“Hilary Presents Herself ......”的精选图片）。如果有人发布了新文章，则顶部图片会发生变化。

因此，从技术上讲，为了保持语义，我将HTML元素看起来像这样：

<section>
   <h1>News</h1>
   <ul>
      <li>
        <figure>
        <img src="image.jpg" class="entry-image"/> <!-- notice the image -->
        </figure>
        <h2>Entry title</h2>
        <span>Category / 01 Jan 2016</span>
      </li> 
      <li>
        <h2>Entry title</h2>
        <span>Category / 01 Jan 2016</span>
      </li> 
      <li>
        <h2>Entry title</h2>
        <span>Category / 01 Jan 2016</span>
      </li> 
      <li>
        <h2>Entry title</h2>
        <span>Category / 01 Jan 2016</span>
      </li>
   </ul>
</section>

问题是，使用这种HTML结构，我必须将文章的特色图像置于其流程之外（使用position: absolute），这可能会使设计变得不稳定。

使用这种结构会更安全：

<section>
   <figure>
   <img src="image.jpg" class="entry-image"/> <!-- image is now here -->
   </figure>
   <h1>News</h1>
   <ul>
      <li>
        <h2>Entry title</h2>
        <span>Category / 01 Jan 2016</span>
      </li> 
      <li>
        <h2>Entry title</h2>
        <span>Category / 01 Jan 2016</span>
      </li> 
      <li>
        <h2>Entry title</h2>
        <span>Category / 01 Jan 2016</span>
      </li> 
      <li>
        <h2>Entry title</h2>
        <span>Category / 01 Jan 2016</span>
      </li>
   </ul>
</section>

所以我不必使用position: absolute将它放在列表的顶部。但是，我不确定它是否是语义。因为顶部图像实际上是最新文章的图像，而不是类别的图像（不是新闻图像）。

最好的方法是什么？