QR code solution with basic html css and flexbox

@magicDGS Thanks you a lot for your return ! What kind of html element do you recommend for this kind of component, espacially for the text section ? I use h1 and p but it's maybe not a good practice here.

@RadishSound - Usually, for what I understand (after a lot of research about semantic HTML), I would say that it depends on what you want to focus; and if it is just for helping in styling, then use a <div> (later, if styling requires something else, you can always remove the <div> without removing the semantics).

In my case, this is what I did (you can see my solution here).

• The whole component was wrapped in a <section> as it is independent for the rest of the content (if it is something that you expect to be repeated, it can also be an <article>)
• I wrapped the <img> into a <div> to help styling, also because I could imaging cases where the image part might contain some other information (like an anchor), so it is more future-proof in case that it should be extended
• For the text, I did wrapped everything into a div with class qr-card-content to style only that <section>

From my POV, another option would be to treat the whole element as an <article> and then the img and content wrapped into a <section>. This at the end depends on how semantic you would like to be: my approach was: wrap everything as a <section> so everything is together semantically; for the rest, it was just a matter of style (and thus, I used <div>).

By the way, take with a grain of salt what I am saying: I am a professional backend-developer with Java (not javascript), but I am currently learning design and HTML/CSS just for fun. So maybe something that I said here is too much overthinking as a Java-focused programmer.

@magicDGS Thank you for this complete explication, I keep in mind your advice for my future development.

@GrigoriSchneider Thanks a lot !