Design comparison
Solution retrospective
Hello Community,
Thank you for visiting my solution. I have 1 question:
- What is the correct semantic to add this component? I used a <div> with class name card, but I don't know if <main>, <article>, <section> or any other should be the ones to use.
Have a great day! :)
Community feedback
- Account deleted
Hi @luibernip, Congratulations on completing the challenge
- <main> specifies the main content of a document
- <article> specifies independent, self-contained content
- <section> defines a section in a document
Personally I think using <section> has more semantic value than <div>
Here's my solution:
https://www.frontendmentor.io/solutions/responsive-qr-code-component-BYV2hQddLr
Marked as helpful0@luibernipPosted about 2 years agoThank you, @suchAGuyLikeMe.
Perfect clarification of the three differences.
Have a great day! :)
0 - @BadLicePosted about 2 years ago
Hi Luis, Great solution!
To answer your question, i wuould suggest to use
<main>
because the card is actually the main block of content of this page.Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/centered-qr-code-card-GgYCj5Q0MH
I hope it helps!
1@luibernipPosted about 2 years agoThank you @BadLice.
I actually changed it to <main>, since I also had some accessibility issues in the reporter.
Thank you for helping others.
Have a great day! :)
0
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