Frontend Mentor - Stats preview card component solution
Design comparison
Solution retrospective
Hello everyone,
I have wrapped HTML5 semantic elements like <article>, <footer> etc inside a <div> for styling purpose. Does this affects the semantic of web-page.?
<div > <article> </div> <div> <footer> </div>Does my final HTML semantic need improvement?
Community feedback
- @markup-mitchellPosted about 3 years ago
@VinayakDhamnekar it's great that you're thinking about the semantics of the markup. I don't think there's anything really wrong here, but here are my observations, since you asked!
Context is important - what is this thing you're building? How will it be used? At first glance I assumed this was a landing page, in which case I was going to suggest you didn't really need the
<article>
tags since there's only one "chunk" of content and it can sit quite happily under<main>
.Looking at the challenge brief, I see it's described as a card component, so OK, let's assume this needs to be capable of appearing in multiple locations on the website, maybe on its own, maybe alongside other cards. In that case yes,
<article>
is a good tag to use for this "article" of content - though you should bring the image inside the<article>
tag as it's part of that content.I think the
<footer>
element is out of place here; just because something's at the bottom doesn't necessarily mean it's a footer. In this case the challenge is named "Stats preview card component" - those stats are actually the main piece of content being presented!The best way to start thinking about structuring and styling content is to imagine it as a straight-up document; what would this look like as a Word .doc file?
Get insights that help your business grow.
Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.
- 10k+ companies
- 314 templates
- 12m+ queries
You've got the heading and text marked up fine, I'd suggest rendering the stats as an unordered list and styling it to present like the design. Then you have a solid underlying document which is good for all kinds of reasons, not least of which is people using assistive technologies like screen readers.
Marked as helpful0@VinayakDhamnekarPosted about 3 years ago@markup-mitchell Thank you very much for in-depth review, that really helped me clear doubts about the semantic. I really liked how you co-related HTML semantics to word .doc file. I will modify my semantic accordingly.
0 - @zyq-mPosted about 3 years ago
Great job buddy!! The design was close enough. For me, you need to set correct max-width and height. You can refer to my solution.
Have a great day. Happy coding.
https://www.frontendmentor.io/solutions/responsive-page-using-sass-flexbox-NQ56cmvX9V
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