Social links profile with a light or dark theme using Flexbox.

Community feedback

• 

  P

  Darkstar•1,100

  @DarkstarXDDPosted 4 months ago

  • Buttons are used for actions like toggling things, submitting forms etc. <a> should be used for navigation. The clickable elements on this design navigates the user to other websites. So they should be <a> elements. Not buttons. You can style them to look like buttons.
  • Those set of clickable elements are also a list of items. So you should use <ul> and <li> elements.
  • All the content should be wrapped in a <main> landmark element. Except the attribution, which should go inside a <footer>.
  • font-sizes should be in rem. Not in px.

  Marked as helpful

  2

  ---

  

  Yefree Valdez•840

  @yefreescodingPosted 4 months ago

  @DarkstarXDD

  That’s exactly the advice I wanted to give him. You’re spot on with everything 😁👍

  2

  

  Affan Amer•370

  @AffanRMPosted 4 months ago

  @DarkstarXDD Thanks a lot for the feedback! May I ask whether the above-mentioned points are good coding practices only or do they help with the SEO of the website as well?

  0

  

  P

  Darkstar•1,100

  @DarkstarXDDPosted 4 months ago

  @AffanRM As for the <a> and <button>, you can't have a href attribute inside the <button>. So if you need to direct the user to another webpage or even a part of your own webpage you will have to use an <a>.

  Rest of the points improve the accessibility of the website. Unlike a <div> or a <span>, elements like <main>, <ul>, <li> have meaning to them. They are semantic elements. When you use <ul> and <li> screen readers will announce that this is a list and those are list items. If you used 5 <div> elements instead of semantic list elements, a screen reader will not know that those are a set of list items. It will just read out each row as if they were new lines of a paragraph.

  Here is a good article that explains why you should use rem instead of px.

  As for your question whether these will help with SEO? I think so. I have not dig deep into SEO, so I can't give a proper explanation but I am pretty sure web crawlers do benefit from the meaning the semantic elements give to the HTML.

  Bottom line is, you should always try to use the most meaningful element for the task.

  1