dimanche 12 juin 2016

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?

This is a design of an article list under the category "News":

enter image description here

The top image is actually the featured image of the latest article (in this case, it's "Vox Populi vox dei"'s featured image). If someone publishes a new article, the top image will change.

So, technically, to keep it semantic, I make the HTML element looks something like this:

<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>

Problem is, with this HTML structure, I have to position the article's featured image outside of its flow (using position: absolute) and that could make the design wonky.

It would be safer to use this structure:

<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>

So I don't have to use position: absolute 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).

What is the best way to approach this?

Aucun commentaire:

Enregistrer un commentaire