Profile Card | Pure CSS & HTML

Community feedback

• 

  Aakash Verma•9,500

  @skyv26

  Posted 6 months ago

  Hi @MarziaJalili,

  Your work looks good! However, I noticed a minor improvement in the structure of your HTML that can enhance its semantic accuracy and accessibility.

  Suggested Change:

  Currently, your structure for the list items is:

  <li>
    <strong>80K</strong>
    <span>Followers</span>
  </li>
  

  While this works, a more semantically correct approach is to include the text inside the <strong> tag for better readability and consistency:

  <li>
    <strong>80K <span>Followers</span></strong>
  </li>
  

  Why This is Better:

  1️⃣ Semantic Grouping:
  By wrapping both the numeric value and its label (Followers) inside <strong>, you indicate that the two are strongly related and equally important.

  2️⃣ Cleaner Markup:
  This approach reduces unnecessary nesting, making the code easier to maintain.

  3️⃣ Consistency in Accessibility:
  Screen readers interpret <strong> tags as emphasizing the content. Grouping the value and label ensures users get the full context without confusion.

  ---

  Looking forward to your thoughts! 😊

  011

  Marked as helpful