Do I need to repeat the class attribute for each source inside a picture element? (HTML5)

Question

I'm in the process of converting our images to webp, which means I need to use the 'picture' tag instead of 'img', as picture allows for a fallback to png formats for devices and browsers that don't support webp.

Anyway, I have an img that looks like this:

So, converting this to webp with the ability to fallback to png would look something like this:

If a browser reads the above code and takes the first webp image, will it also apply the classes, alt & title tags attached to the img element or do I need to repeat them for each source, or add them to the parent picture tag?

I've tried to look this up but I can't find an answer. Maybe because it's obvious or maybe because I'm using the wrong words to describe the issue. Sorry if this has already been covered somewhere.

user_3536236 · Answer

Acccording to MDN the element simply takes the content of the and puts it inside the space defined by the tag:

The browser will consider each child element and choose the best match among them. If no matches are found—or the browser doesn't support the element—the URL of the element's src attribute is selected. The selected image is then presented in the space occupied by the element.

(My emphesis)

Therefore, I would expect that the classes on the tag would still appear to the end user, regardless of which (or any) material is used.

My Testing:

But I had not checked this. So I decided to run a few tests with image types (PNG / JPG / Webp) and elements:

.one {
  border: 3px solid #f00;
}
.two {
  border: 3px solid #0f0;
}
.thr {
  border: 3px solid #00f;
}
.fou {
  /* Picture Element */
  border: 3px solid #333;
  display: inline-block;
}

From the above example, and from editing it and playing with it by

Rearranging the materials.

It can be easily found that:

The elements are NOT hidden on the page,but do not contain the graphical content.
Regardless of the used, the element is always the element that contains the picture graphic (sometimes called an image (WTF?) ) .
The container object always exists but is a container such as
in HTML5. It should not be given CSS styling intended for contents such as .

Conclusion:

The code above (and its fiddles and edits) shows that all elements are present in the HTML, but the only one that is the image is the element.

Therefore, you should not be applying any styling or CSS whatsoever to elements and only container stylings should be applied to elements.

You Asked:

Do I need to repeat the class attribute for each source inside a picture element?

The Answer:

The answer is NO. You should style the element ONLY.

Example:

Do I need to repeat the class attribute for each source inside a picture element? (HTML5)

1 Answers

My Testing:

Conclusion:

You Asked:

The Answer: