Design comparison
Solution retrospective
Hello Guys!
I would really appreciate some feedback on the HTML Markup of my solution.
If there's a more Semantic way of marking up this component, please let me know so that I can improve my HTML skills. Thanks so much in advance!
Community feedback
- @markup-mitchellPosted about 4 years ago
Hi Simon. This is a really close implementation of the design!
I don't claim to be an expert on HTML semantics, but from my own experience and research here's what I'd suggest:
Imagine there was no styling whatsoever - what would this information look like in, say, a MS word doc?
You'd probably want "Join our community" to be your main heading (
<h1>
). You should have exactly one<h1>
on a page.It's great that you're using
<section>
s, but you only have one and it's immediately inside<main>
, so at best it's serving no real purpose, and at worst it could be confusing because one section implies the existance of others (which there aren't!).I would make the outermost div of each box into a section tag and give it an appropriate heading level:
h1 - join our community h2 - monthly subscription h2 - why us
I wouldn't make "30 day..." a heading because it doesn't directly relate to the content beneath it. Just because text is big, bold or eyecatching doesn't mean it's a heading! It took me ages to decouple those in my head!
Lastly, I'd be tempted to represent the content in the 2nd and 3rd sections as unordered lists, since they'd make more sense that way than as prose.
2@simonhernandezPosted about 4 years ago@markup-mitchell Hi Mark!
I'm so grateful to you for sharing such a detailed feedback. I appreciate it a lot!
I really liked the way you explained the proper use of each tag, specially the headings!
I will definitely take each of your valuable suggestions into account for my future markups.
Thanks again for helping me become a better Dev!
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