45 replies

Semantic question

<article class="c-product">
  <a href="/shop/{{ product.slug }}">

    {{ img.responsiveImage(product.productPhotos[0], {
      aspectRatio: '9:14',
      quality: 80,
      transformHandle: 'img2Webp'
    }) }}

    <div class="c-product__description">
      <p>
        {{ product.title }}
        <span>{{ product.defaultVariant.price|commerceCurrency }}</span>
      </p>
    </div>
  </a>
</article>

<article class="c-product">
  <a href="/shop/{{ product.slug }}">

    {{ img.responsiveImage(product.productPhotos[0], {
      aspectRatio: '9:14',
      quality: 80,
      transformHandle: 'img2Webp'
    }) }}

    <div class="c-product__description">
      <p>
        {{ product.title }}
        <span>{{ product.defaultVariant.price|commerceCurrency }}</span>
      </p>
    </div>
  </a>
</article>

I have a quick semantic quesiont. I have my product card surrounded with bot an article tag and a a tag, but what's the most accurate solution for this? I don't like having both at the same time but I feel like it's more accurate semanticly.

(feel free to ignore the twig template variables etc)

KP-C

Kevin Powell - Community•8mo ago•

45 replies

Kingpin

Semantic question

<article class="c-product">
  <a href="/shop/{{ product.slug }}">

    {{ img.responsiveImage(product.productPhotos[0], {
      aspectRatio: '9:14',
      quality: 80,
      transformHandle: 'img2Webp'
    }) }}

    <div class="c-product__description">
      <p>
        {{ product.title }}
        <span>{{ product.defaultVariant.price|commerceCurrency }}</span>
      </p>
    </div>
  </a>
</article>

<article class="c-product">
  <a href="/shop/{{ product.slug }}">

    {{ img.responsiveImage(product.productPhotos[0], {
      aspectRatio: '9:14',
      quality: 80,
      transformHandle: 'img2Webp'
    }) }}

    <div class="c-product__description">
      <p>
        {{ product.title }}
        <span>{{ product.defaultVariant.price|commerceCurrency }}</span>
      </p>
    </div>
  </a>
</article>

Semantic question

Similar Threads

Semantic question

Similar Threads

Similar Threads

Similar Threads