Does the HTML picture Element Have "alt" Attribute?

The HTML <picture> element itself does not have an alt attribute. It is merely a container for images, that contains zero or more <source> elements and one <img> element. The <picture> element is meant to provide a context for its contained <img> element, allowing the user agent to choose from multiple image sources. For example:

<picture>
    <source srcSet="path/to/logo.avif" type="image/avif" />
    <source srcSet="path/to/logo.webp" type="image/webp" />
    <img src="path/to/logo.png" alt="My Logo" />`
</picture>

The alt attribute specified on the img element is the one that's applied to whatever image is selected by the user agent (based on the <source> elements and the <img> element).

The <source> elements contained inside the <picture> element help the user agent select the image source that best matches the capabilities of the display device. It does so by examining the <source> element's srcset, media, and type attributes. If no match is found, then the <img> element is used as a fallback. In either case, the selected image is presented in the space occupied by the <img> element.

In summary:

  • <picture> element is only a container that provides context to define different image sources for the <img> element;
  • <source> element(s) describe different image sources;
  • <img> element describes how the image should be displayed and which attributes of the image are used.

Hope you found this post useful. It was published . Please show your love and support by sharing this post.