Design comparison
Solution retrospective
I wasn't sure whether to upload the image with img tag or as a background-image
Community feedback
- @TheRequiemPosted over 1 year ago
First of all, well done on your solution. You're brave and curious to ask that question and willing to learn! Always think about semantics. How accessible it will be on screen readers for example. Backgrounds are only decoration in nature and images on the other hand may contain meaning. In this case, the perfume is a product and it is not part of a decoration but an image of a perfume that the customer is supposed to order and buy. You should use
<img>
tag here and make sure to includealt
attribute in the tag to describe the image because with it being background, the screen readers will just ignore there ever being an image and overall it is a bad HTML practice. Another thing you can do for accessibility is try to use<main>
,<article>
,<aside>
etc. instead of just<div>
.Marked as helpful2
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord