Responsive recipe-page

Community feedback

• 

  Sivaprasath•2,520

  @sivaprasath2004Posted 7 months ago

  I noticed your HTML is well-structured, but it lacks semantic markup, which is crucial for making your project more accessible and for SEO purposes. I'll suggest replacing some <div> elements with semantic tags for you to consider:

  • <div class="container"> could be replaced with a <main> tag, as it contains the main content of the page.
  • <div class="recipe-img"> could be replaced with a <figure> tag, as its content is just an image, and that image is the main focus.
  • <div class="recipe-step"> could be replaced with a <section> tag, as all the content within it is thematically related and dependent on the main content. Regarding the instructions section, you've created a somewhat verbose structure that could be simplified using an <ol> and <li>, which would reduce the need for so many <div> elements. You could then style the numbers using the ::marker pseudo-element.

  Marked as helpful

  0