Jessica's Social Media Links - Connect with her :-)

Community feedback

• 

  P

  Ayua Michael•500

  @TorCanHackPosted 10 months ago

  Hi, Khulekani Gcaba.

  Congratulations on completing the Social Links Profile Challenge! 👏🏽 🎉

  I have a suggestion for you, if you don't mind. I noticed in your HTML that you used two header tags: h2 and h5.

  It's important when using header tags to start with h1 and then proceed in descending order of priority. In your current code, you didn't start with h1 but instead went straight to h2, and then jumped to h5. I understand that you may have chosen these tags based on their sizes – we've all made that mistake at some point.

  Moving forward, it's better to start with the <h1> tag for your most important text, and then progress downwards like a flight of stairs.

  This principle ensures that your webpage is well-structured and accessible to everyone, including those who use screen readers. These also ensures you website is propely optimised for search engines.

  It is interesting if you can check out more information on why the proper usage of header tags are important for web development, I recommend reading the following article

  Great work!

  I hope you find this suggestion helpful.

  Happy coding! 🥂

  Marked as helpful

  0

  ---

  

  Khulekani Gcaba•130

  @Khulekani1211Posted 10 months ago

  @TorCanHack, Thank you for the feedback. I didn't know that having header tags follow from h1 onwards helps with accessibility and SEO. I will keep this in mind moving forward.

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @Khulekani1211!

  Your solution looks great!

  I have a couple of suggestions (about semantic HTML) for improvement:

  📌 First: Use <main> to wrap the main content instead of <div>.

  Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

  📌 Second: Don't skip heading levels - start with <h1>, then use <h2>, and so on.

  Unlike what most people think, it's not just about the size and weight of the text.

  • The <h1> to <h6> tags are used to define HTML headings.
  • <h1> defines the most important heading.
  • <h6> defines the least important heading.
  • Only use one <h1> per page - this should represent the main heading/title for the whole page.

  All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Khulekani Gcaba•130

  @Khulekani1211Posted 10 months ago

  @danielmrz-dev, Thank you for the feedback. I always thought the heading tags were used to size a heading, so I just use which ever heading tag that has the font size I want. Moving forward I will follow best practice and start with <h1> when using header tags.

  0
• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 10 months ago

  Hello there 👋 @Khulekani1211.

  Good job on completing the challenge !

  Your project looks really good!

  I have a suggestion about your code that might interest you.

  There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

  Use <main> to wrap the main content instead of <div>. 📌 Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page. This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope this suggestion is useful for future projects.

  Other than that, great job!

  Happy coding.

  Marked as helpful

  0

  ---

  

  Khulekani Gcaba•130

  @Khulekani1211Posted 10 months ago

  Hi @Ezekiel225, Thank you for the feedback. I'll be using the browser extension Perfect Pixel moving forward. I struggled with properly scaling the design in this challenge. Thanks for explaining the difference between the <main> and <div> tags. I always treated <div> as achieving the same thing as <main> or <section>.

  0