@markup-mitchell
Posted
@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 helpful
@VinayakDhamnekar
Posted
@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.
