Use of structure and semantics in Dasmoto's Arts and Crafts

Hey everyone. I just finished the project for Developing in CSS, Dasmoto’s Arts and Crafts, in the Front-End path. I’m looking for someone to review my work for it, specifically my use of structure and semantics. I used a few elements such as figure and section because I thought they made sense, but I’d like to know what others think. Any help would be great!

here is my Github page link: Dasmoto's Arts and Crafts

1 Like

Nicely marked up, with consistent structure. Only two things to consider…

  1. Images are missing the alternate text. This is a required attribute for accessibility.
  2. FIGURE lacks a FIGCAPTION, which adds value.

Keep alternate text very simple, and explicitly descriptive.

The H3 in your markup could be inserted in the FIGCAPTION. H3 is flow content, which is a valid child element for this purpose.

<figure>
  <img>
  <figcaption><h3>Hacksaw Brushes</h3></figcaption>
<figure>

The P element is also flow content and could just as easily be inserted, as well. Containing everything within the figure keeps it nicely grouped and says, “This is closely related content.”

The SECTION elements are appropriately used. Each product in that category could have the same markup as above.

<section>
  <h2>Brushes</h2>
  <figure>

  </figure>
  <figure>

  </figure>
  <figure>

  </figure>
</section>
1 Like

Thank you for the review! A main concern I have is how to properly group content in a document, so the figcaption advice helps. Another question, why do you have multiple figure elements in the last example?

1 Like

That is to illustrate all the kinds of brushes in the Brushes section. Each type will have its own figure.

<section>
  <h2>Brushes</h2>
  <figure>    
    <img>
    <figcaption>
      <h3>Hacksaw Brushes</h3>
      <p>Lorem ipsum <span>$3.50</span>.</p>
    </figcaption>
  </figure>
  .
  .
  .
</section>
1 Like

I see, they would be for additional items with images/captions. Thank you for your help!

1 Like