
Design comparison
Solution retrospective
This was my first time using semantic elements in a project, and I'm not entirely sure if I used them correctly. I would appreciate any feedback and tips regarding their usage.
Community feedback
- @Mathieu-310Posted 23 days ago
Hi dear!
This some some suggestions about using semantic HTML5:
- You use
<header></hearder>
for the name and the address in your profile card. I think there is no need for header tag here because the header tag contains the primary information of the page including navigatons links, logo, or sometimes the title of the page. -If you want you can use<address></address>
tag for the address infos. Like this:
<address>London, United Kingdom</address>
- Lastly don't use
<section></section>
everywhere.Think like semantic tags are meaningful label for different division for your website just like your home: there are the bathrooms, bedrooms,etc. But there are also some part where you put some of your stuff that aren't really sections in their own right.They're just sections for organizational purpose. So the idea is to use semantic tags where it's necessary to label a part of your website just like the different parts of your home and generic tags for organizational purpose. So here there is not different part, just some division for organizational purpose so in this case just use<div></di>
element for styling purpose.
In conclusion if you want to provide a meaningful division of your website use semantic tags if not just use div element for styling division purpose.
I hope you are understanding, happy coding!!
Marked as helpful0P@Trischa-99Posted 23 days ago@Mathieu-310 Thank you very much for the feedback, I truly appreciate it^^ I'm still trying to get the hang of this, but your explanation makes a lot of sense. I'll try to approach my next project with that mindset.
1 - You use
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