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 Sergi Beltran
Sergi Beltran
18,493 Points

Which one is better html markup?

Hi everyone! I have read several documentation about section tag but I still have doubts.

I'm building a website where I have a module and inside 4 links with a title and image.

I have doubts which one is better html markup, let me show the 3 examples:

<!-- Example 1 -->

<section class='my-module'>
 <section>
  <a href='#'>
   <figure>
    <figcaption>
    <h3>Product name</h3>
   </figcaption>
   <img src='product.jpg'>
  </figure>
 </a>
 </section>
  <section>
   <a href='#'>
    <figure>
     <figcaption>
      <h3>Product name</h3>
     </figcaption>
     <img src='product.jpg'>
    </figure>
   </a>
 </section>
</section>


 <!-- Example 2 -->

<section class='my-module'>
 <section>
  <a href='#'>
   <h3>Product name</h3>
   <img src='product.jpg'>
  </a>
 </section>
 <section>
  <a href='#'>
   <h3>Product name</h3>
   <img src='product.jpg'>
  </a>
 </section>
</section>


<!-- Example 3 -->

<section class='my-module'>
 <ul>
  <li>
   <a href='#'>
    <figure>
     <figcaption>
      <h3>Product name</h3>
     </figcaption>
     <img src='product.jpg'>
    </figure>
   </a>
  </li>
 <li>
  <a href='#'>
   <figure>
    <figcaption>
     <h3>Product name</h3>
    </figcaption>
    <img src='product.jpg'>
   </figure>
  </a> 
 </li>
</section>
    ``` 

What do you think is the best way? Do you suggest another way to build  that?

Thanks!

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sergi,

It seems that you have a list of links to product pages so I would be leaning towards example 3. It doesn't seem like each link would constitute another section of the page so using section around each one doesn't seem appropriate.

Also, not sure if this is an appropriate use of the figure element. Can you describe how this section fits in with the rest of the page? What's the main content of this page? The figure element would seem to imply that these links are referenced in the main content area somewhere.

Right now I would suggest the unordered list without the figure element.

<li>
  <a href='#'>
    <h3>Product name</h3>
    <img src='product.jpg'>
  </a>
</li>

Feel free to give us additional information about the page if you want as that may affect everyone's answer here.

Nandini Goel
Nandini Goel
2,263 Points
Nandini Goel
Nandini Goel
2,263 Points

All 3 are great, try which ever you like but I would suggest the 3rd one. regards

Florian Goussin
Florian Goussin
8,925 Points
Florian Goussin
Florian Goussin
8,925 Points

I would say the first one if you need figure captions, the second one if your don't need it. The third one is more interested for accessibility and for responsive. But I would replace the too inner section by div to emphasize the importance of the global section. Indeed, I think a section is semantically more useful to describe something bigger than just a figure.

Sergi Beltran
Sergi Beltran
18,493 Points
Sergi Beltran
Sergi Beltran
18,493 Points

Hi everyone, thank you very much for your answers.

I've made a screenshot to show you what you want to show on the website.

The items are a list of products.

At the moment, my code is a mix of yours :)

<li>
 <a href='#'>
  <figure>
   <figcaption><h3>Product name</h3></figcaption>
   <img src='product.jpg'>
  </figure>
  </a>
</li>

I appreciate your comments ;)

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sergi,

Here's a link to a description of the figure element in the html5 specification: 4.4.11 the figure element

Your product images are the main content of the page and according to the 2nd code example in the link it seems that it would be appropriate to mark up as a figure

So I think you would be fine with either the markup I gave in my answer or the markup you have in this answer here.