Social Links Profile

Community feedback

• 

  P

  Adriano•42,700

  @AdrianoEscarabotePosted 22 days ago

  Hi webthingz, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

  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 amazing.

  I hope this is helpful. 👍

  Marked as helpful

  0

  ---

  

  webthingz•50

  @webthingzPosted 22 days ago

  @AdrianoEscarabote Hi Adriano, thanks for your reply. I did this on purpose for a litle discusion :-).

  Because I have the feeling that we are in a new era where we should only use ul and li if it is indeed a list. But is navigation a list or just a group of links? Maybe when you are using a complex dropdown menu (but still not in my belief). But a simple Main navigation bar I would do this like this:

  <nav aria-label="Social Links">
     <a href="#">GitHub</a>
     <a href="#">Frontend</a>
     <a href="#">LinkedIn</a>
     <a href="#">Twitter</a>
     <a href="#">Instagram</a>
  </nav>
  

  Cleaner code and screenreaders can recognize the nav tag + the aria-label

  Would lopve to here what you think about this... :-)

  1

  

  P

  Adriano•42,700

  @AdrianoEscarabotePosted 21 days ago

  @webthingz I see where you're coming from, and it’s an interesting perspective. Using a <nav> with an aria-label does indeed provide a clear semantic purpose for screen readers, and I agree that it keeps the code cleaner in simpler cases.

  However, I believe there are still a few compelling reasons to consider <ul> and <li> for grouping navigation links, especially in scenarios where the links are related:

  • Semantic Clarity: While <nav> and aria-label are great for marking up navigation areas, <ul> adds another layer of meaning, emphasizing that the links are part of a collection.
  • Assistive Technology Compatibility: While most modern screen readers can handle <nav> properly, <ul> inherently provides additional cues about relationships between items.

  That said, I completely understand the appeal of cleaner, simpler HTML. In practice, I think the choice depends on the context of the project and the intended structure of the navigation. For a minimal navigation bar with no dropdowns or hierarchy, your approach is totally valid and effective!

  0
• 

  Damiro Gómez•80

  @damiro3017Posted 22 days ago

  Excelente código, muy acertada la solución.

  0