Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by eslam said
eslam said
Courses Plus Student 6,734 Points

figure tag

for organization purposes is it oki to wrap every image with a figure tag ?

3 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Hi eslam said,

My understanding is that semantically, the <figure> is used when it is directly related to the content but does not alter the flow and is not absolutely reliant on or by said content. So, background images, I would say no. Decorative elements... no. But an image, graph, etc directly related to the content flow, sure.
I only use <figure> if I am captioning the image with additional info (i.e. photo credits). But honestly, I think this could be a styling decision that would be at the discretion of the designer or what the team standard is (if you're designing with a company / team).

Have a look at the MDN documentation for <figure> and go from there.

Keep Coding! :smiley: :dizzy:

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
eslam said
eslam said
Courses Plus Student 6,734 Points

Thank you both for your answers i really appreciate it finall question and sorry for that,

lets say i wanna make 3 rectangles stacking vertically in the following order :

rectangle 1 - a title ( for artist name or the company who make that work )
rectangle 2 - the image itself
rectangle 3 - a title ( the work name )

so it would like something like the following img : http://prntscr.com/hln8k9

i used the following code :

        <section class="work-container">
              <header>
                  <p>Artist Name</p>
              </header>
              <figure>
                  <img src="">
              </figure>
              <footer>
                  <p>work title</p>
              </footer>
       </section>

and i`ll add further styling with css, so for semantic and organized code is my code fine ?

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
eslam said
eslam said
Courses Plus Student 6,734 Points

yea yea ofc i`ll use a source i was just asking about the structure itself, and thank you so much for your answers i really appreciate that