QR code component

Community feedback

• 

  Chris•400

  @chrisvn188Posted almost 3 years ago

  @FluffyKas Hey I really like the way you structrure your code. It's nice and neat. I just wondered do you always use <figure> to wrap around img? When you write figcaption and when not? Thank you so much!

  2

  ---

  

  P

  Fluffy Kas•7,695

  @FluffyKasPosted almost 3 years ago

  @chrisvn188 Thanks for the kind words Chris ^^

  I try to avoid wrapping images if I can (I could've actually avoided it here, thanks for pointing that out :D). I'm not sure what are the best practices for this though, as I'm not a professional yet, but if I must wrap an image, I'd choose something that's a bit more semantic than a simple div, like figure or picture, depending on the situation. This logic may easily be flawed, as using an img tag should be semantic enough in itself and then I could just use a div for styling... Well, now you made me wonder, I better ask around on Slack or something ^^

  2

  

  Chris•400

  @chrisvn188Posted almost 3 years ago

  @FluffyKas Yeah sometime I'm confused too :)). Sometimes I leave img stand alone. But I think there is some other ways to handle it. I just inspect real websites and see how they do things. Maybe we can find something there but it's better if we can understand how they do it.

  0

  

  P

  Fluffy Kas•7,695

  @FluffyKasPosted almost 3 years ago

  @chrisvn188 I just posted the question on frontend mentor's Slack, I'll let you know if I get an answer ^^ But yeah, inspecting real websites is a great idea, I do that a lot too, just need to be careful, as not all of them can be taken as a good example when it comes to accessibility and semantic markup :D

  1

  

  Chris•400

  @chrisvn188Posted almost 3 years ago

  @FluffyKas haha always, I have to inspect a lot to see common things. Not every websites are good examples of accessibility and semantic. Thank you for the Slack post, I'm really appreciated!

  0

  

  P

  Fluffy Kas•7,695

  @FluffyKasPosted almost 3 years ago

  @chrisvn188 Hey hey, sorry for the late reply. Not sure if you saw my post about image wrappers on Slack, if not I'll just copy paste the answer I got here (I really hope Grace doesn't mind!):

  " img tag is all the semantics you need (or picture element with img inside if serving multiple)UNLESS you need/want to include a caption, then a figure element is fine to use

  It’s also fine to wrap in a div if needed for styling. But usually a css reset will set images to display block, so a div can be unnecessary

  If an image is decorative (has empty alt text / aria-hidden / role presentation) it has no meaning"

  So to sum it up, thanks Chris for pointing out a mistake I've been making pretty much since I started coding. :D I'm really grateful!

  0

  

  Chris•400

  @chrisvn188Posted almost 3 years ago

  @FluffyKas No worries :) I actually saw it on best practice. It's a great answer from Grace. Thank you both.

  0