Kevin Powell - Community•4w ago

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)

39 Replies

Jochem•4w ago

as long as there's nothing interactive inside the A tag, you're good. I agree that this is semantically acurate

KingpinOP•4w ago

it's makes it trickier to style I feel like

13eck•4w ago

I concur. Reading the spec on MDN your card is semantically correct.

Jochem•4w ago

if you need, you can always add wrapper elements to make styling easier

KingpinOP•4w ago

not sure tbh, was alright with this one. but in some cases it does makes it trickier due to the extra a tag

Jochem•4w ago

you may have to reset some of the default styles on the anchor for .c-product a

13eck•4w ago

Semantically it's correct, which is your title. Style-wise is something completely different and not related to the semantics of the elements.

KingpinOP•4w ago

ah ye fair

13eck•4w ago

You could probably put the anchor tag only around the product title and call it a day. The entire thing doesn't have to be a clickable link

KingpinOP•4w ago

I think the user would expect the entire card to be clickable no?

ἔρως•4w ago

or set the tag at the top, and make it take the whole space using css

KingpinOP•4w ago

I'il leave it for now since it's already done, but I keep notes for next time.

13eck•4w ago

I wouldn't, no. And on mobile if I'm scrolling down and accidentally tap on the image and it takes me somewhere else? Oof

Jochem•4w ago

I honestly would expect that, yeah

KingpinOP•4w ago

on mobile it's harder to accidently tap afaik, cuz its needs to be a rather forcefull tab

Jochem•4w ago

the accidental tap is annoying though

KingpinOP•4w ago

on desktop it's easier to misclick cuz the desktop registers the click faster.

13eck•4w ago

On desktop I scroll with the mouse wheel, though, not click-and-drag so I have more misclicks on mobile

KingpinOP•4w ago

I think if I where to see this I would try to click on the image but nothing would happen.

13eck•4w ago

I guess that goes to show that it's a personal preference, hey?

KingpinOP•4w ago

possibly anyways thx for the tips

13eck•4w ago

You'll find many truths we cling to depend greatly upon our own point of view

– Obi-Wan Kenobi

KingpinOP•4w ago

perspective matters

ἔρως•4w ago

i wouldn't too, but, if you really want everything to take the full space, it is a good option it also allow other interactive elements to be interactive

KingpinOP•4w ago

I mean technically for mobile I could change it differently?

ἔρως•4w ago

with css, yes

Jochem•4w ago

I'd recommend checking out what other sites are doing. Conventions matter a lot in UX

KingpinOP•4w ago

for this project won't be doing that tho.

Jochem•4w ago

The couple I checked (bol, Amazon, the yarn store I was on) all have fully clickable product cards

KingpinOP•4w ago

anyways thx a lot gonna continue with my project now. ig it also depends per country, UI/UX rules in china are different then from western standards afaik mind if I just use this thread for other questions regarding my project? I don't fancy creating a new one everytime

KingpinOP•4w ago

I just realised this is a review section

KingpinOP•4w ago

bootstrap question

<section class="c-blog container">
  <div class="row">
    <div class="col-12 col-lg-6">
      <div class="c-blog__info">
        <div class="c-blog__title">
          <p>{{ time.timeAgo(section.postDate) }}</p>
          {% set title = section.title ?? '' %}
          {% set parts = title|split('#')|filter(v => v|trim is not empty) %}

          {% include '_components/_subtitle.twig' with {
            title: parts[0] ?? '',
            description: parts[1] ?? ''
          } %}
        </div>

        <div class="c-blog__description">
          <p>{{ section.description }}</p>
          <a href="{{ section.blogLink.value }}">{{ section.blogLink.label }}</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-6">
      {{ img.responsiveImage(photo, {
        aspectRatio: '100:100',
        quality: 80,
        transformHandle: 'img2Webp'
      }) }}
    </div>
  </div>
</section>

<section class="c-blog container">
  <div class="row">
    <div class="col-12 col-lg-6">
      <div class="c-blog__info">
        <div class="c-blog__title">
          <p>{{ time.timeAgo(section.postDate) }}</p>
          {% set title = section.title ?? '' %}
          {% set parts = title|split('#')|filter(v => v|trim is not empty) %}

          {% include '_components/_subtitle.twig' with {
            title: parts[0] ?? '',
            description: parts[1] ?? ''
          } %}
        </div>

        <div class="c-blog__description">
          <p>{{ section.description }}</p>
          <a href="{{ section.blogLink.value }}">{{ section.blogLink.label }}</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-6">
      {{ img.responsiveImage(photo, {
        aspectRatio: '100:100',
        quality: 80,
        transformHandle: 'img2Webp'
      }) }}
    </div>
  </div>
</section>

I currently have my container set up like this but does anyone know a way using bootstrap how to make sure the image does take the full fluid width? as shown in the image

13eck•4w ago

New question, new post please

KingpinOP•4w ago

😞

Jochem•4w ago

for two reasons: 1) #help is supposed to also be a kind of knowledge bank. If everyone just had their own single help post, info would be impossible to find. 2) New posts get new eyes. I don't know anything about bootstrap, and I doubt Beck would use it either. Epic might, but I'm sure there's folks that'll click on a question with "bootstrap" in the title

KingpinOP•4w ago

it's just annoying especially if the question seem small.

Jochem•4w ago

thems the rules I'm afraid

13eck•4w ago

No question too small

Jochem•4w ago

a lot of the time even "tiny quick" questions balloon to a hundred messages and if you do occasionally have a question that's just going to get a "yes" as an answer, then so be it

Gaming

Programming

Semantic question

Did you find this page helpful?