This is a design of an article list under the category "News":
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