Four card feature section

Community feedback

• 

  Fanni K•80

  @fananibananiPosted almost 2 years ago

  Hi there! Great job on this project!

  I'm quite a beginner myself, but one thing I can give you feedback on is the semantic HTML used in your project. As you can also see in the accessibility report, "Heading levels should only increase by one". You are not only missing <h4> heading, but the very crucial <h1> heading as well. Semantic elements in HTML are all the tags that clearly describe their content, such as the <header> tag you used. Using them will not only make your HTML look more organized, but it will also help people who are using assistive technology like screen readers or those who have slow internet and might initially view your website without the CSS loaded.

  As a best practice, <h1> heading should be used only once on one page, but it should definitely be used if headings are needed on the page (even if there are no headings, a short description in a <h1> heading that is visually hidden but that screen readers can pick up on might be a good idea). Don't skip heading levels, like you did with <h4>, it will mess up the logical order of the page. This may not seem like a big issue, but it's good to learn to not skip heading levels and the strange order can really mess with screen readers too. From the provided design, in my opinion only heading levels 1-3 are needed for this project.

  Another thing I noticed in your HTML is the usage of <section class="main">. In semantic HTML, the <main> element is available, so since you have a <header> and a <footer>, it would be best to use <main> instead of <section class="main">. As far as I know, using <section> is only recommended if there is no semantic HTML element that would describe the content better, so it is used more as a last resort. You could probably use <section> for the individual boxes in this case.

  I definitely don't have a very wide range of knowledge on this topic yet, but the following links might provide some initial info on this:

  https://developer.mozilla.org/en-US/docs/Glossary/Semantics

  https://www.freecodecamp.org/news/semantic-html5-elements/

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Mohamed Barakat•30

  @LongLiveBarakatPosted almost 2 years ago

  @fananibanani thank you for your feedback , i will definitely consider this on next peojects !

  0