CODEWITHSUNDEEP
htmlcss
olly
olly

Reputation: 333

When using the HTML <div> tag what is the result of specifying a value for an attribute but not a name for the attribute? See example in description

Below is a line of code that I don't understand. Specifically, i don't understand the use of 'data-image-with-placeholder-wrapper' without an attribute being specified for it, i haven't seen this syntax before.

<div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>

I expected something like this for example

<div class="product-card__image-with-placeholder-wrapper data-image-with-placeholder-wrapper">

Or this

<div class="product-card__image-with-placeholder-wrapper" some_other_attribute="data-image-with-placeholder-wrapper">

Could someone explain the syntax that has been used. Below is the full code in case it helps. Thanks

  <div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ product.featured_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ product.featured_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>
    </div>
    <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
  </div>

Upvotes: 0

Views: 69

Answers (1)

T. Short
T. Short

Reputation: 3614

data-image-with-placeholder-wrapper is simply an attribute with no value assigned, which is perfectly normal practice and can be useful in some scenarios.

One case is when it is used as some kind of identifier for a javascript function, for example.

You could write a function that would look for elements with the data-image-with-placeholder-wrapper attribute and perform some action to it.

Upvotes: 3

Related Questions