Design comparison
Community feedback
- @AdrianoEscarabotePosted 13 days ago
Hello Madhuharika756, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:
To improve the semantics and accessibility of your code, consider using the
<ul>
(unordered list) element to group related links. The<ul>
tag is ideal for representing collections, such as a list of social media links or navigation items.Using
<ul>
not only makes your code more structured and meaningful, but it also helps assistive technologies identify the group as a related set of items, enhancing the experience for screen reader users. Additionally, this approach improves overall readability and maintainability of your HTML.Example:
<ul> <li><a href="#">GitHub</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Instagram</a></li> </ul>
In this example:
- The <ul> wraps the entire group, indicating that these links are related.
- Each item is enclosed in a <li> (list item), which provides a clear structure and logical grouping.
This method is particularly useful for navigation menus, social media links, or any set of grouped items, offering better support for both SEO and screen readers.
Pro Tip: Avoid using
<div>
elements alone for lists, as they don’t convey the same semantic meaning. Whenever possible, choose semantic tags like<ul>
or<ol>
to improve the quality of your code.The rest is spot on.
Hope it’s helpful to you. 👍
Marked as helpful0@Madhuharika756Posted 13 days ago@AdrianoEscarabote Hello, Thank you so much for your thoughtful feedback! I really appreciate the time you took to review my solution and provide such detailed advice. I completely agree that using semantic elements like <ul> for grouping related links is a great way to enhance both the accessibility and readability of the code. It’s always encouraging to receive constructive suggestions like this—it helps me grow as a developer. Thanks again for pointing this out!
1
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