Skip to content
Submitted 4 months ago

Practising semantic HTML

innitman•130
@innitman
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Reading about semantic HTML :) Made me rethink how often I reach for div all the time.

What challenges did you encounter, and how did you overcome them?

Thinking of how to include a heading or similar in each article or section, but found this comes naturally after a while.

What specific areas of your project would you like help with?

I've read the MDN docs, and my take home understanding is is used for something "standalone" and/or reusable. is more for highlighting a non-standalone area or group of items (or basically when a more specific element isn't available). is use purely when styling needs to be added to a block. I'd be grateful for any mental models people have found helpful for when to use one or the other.

Community feedback

  • Sunil•180
    @SunilParbhooPosted 4 months ago

    Nice job on this project! Nice job utilizing html elements other than divs for everything. To address your question regarding possible additional elements to use other than divs, here is an article that may be useful (although I see you already read through the MDN docs for this as well). Stop using so many divs! An intro to semantic HTML

    One thing to possibly get this to look more closer to the design is to make sure you are using the correct font color for the text. Other than that, keep up the good work!

    Marked as helpful
    1
    innitman•130
    @innitmanPosted 4 months ago

    Many thanks @SunilParbhoo, really nice link. Re: matching colors -> I'm red-green colour blind so it's a little tricky for me, especially when it's in the red to brown range! I sometimes use tools like Sip http://sipapp.io/ to help

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord