Mobile friendly solution with HTML, CSS and flexbox
Design comparison
Solution retrospective
When should I use id
, and when should I use class
?
Is it better practice to use semantic elements instead of divs
?
Community feedback
- @bramizdevPosted over 1 year ago
The
id
attribute is used to uniquely identify an element on a page. Eachid
value must be unique within the entire page. This is useful for adding functionality to specific elements using JavaScript or CSS. For example, you might use anid
attribute to target a specific element with a particular style or behavior, or to create anchor links that navigate to specific sections of the page.On the other hand, the
class
attribute is used to group together elements with similar characteristics. Multiple elements can share the sameclass
value, and theclass
attribute can be used to apply a style or behavior to all elements that share the same class. For example, you might use a class attribute to apply a common style to all elements of a certain type, or to group together elements that should have a similar behavior.In general, you should use the
id
attribute when you need to uniquely identify a specific element on a page, and theclass
attribute when you want to group together multiple elements with similar characteristics. By using these attributes appropriately, you can create well-organized and maintainable HTML code that is easy to style and manipulate using CSS and JavaScript.Marked as helpful2 - @visualdennissPosted over 1 year ago
Is it better practice to use semantic elements instead of divs?
100% it is better to use Semantic HTML for many reasons such as Web Accessibility, better SEO Performance, Easier Development and Maintenance due to better HTML Structure.
There are tons of articles about that, but here is a nice one: https://uxdesign.cc/semantic-html-the-foundation-of-web-accessibility-e5bbecad7c17
Take a look at the comparison of images of the difference in structure between a semantically structured web page and non-semantically structured web page. This is the difference it makes.
IDs are unique and CSS Classes can be used many times, you don't need to select each element only once and specifically. IDs are used in CSS Styling very rarely, mostly when JS is involved. Use classes for reusability.
Hope you find this feedback helpful!
Marked as helpful1 - Account deleted
Hey!
-
id
in HTML shouldn't be repeated, they should be unique. They are also more specific than classes in CSS. Classes also allow for reusability, which is much more noticeable on large-scale products. Where you are usingid
in this product, you would be fine using class.Here's a great article for specificity, which would influence what you use: MDN Specificity
-As for semantic elements - yes! You should use semantic elements wherever possible. You're definitely on the right track with semantics.
Docs for semantic elements: MDN Semantics
The MDN docs that I have linked are great resources for learning more on anything web development. I would take a look at the accessibility report and see if you can fix those. Overall, it looks great! Keep up the good work π
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