Does the HTML source Element Have "alt" Attribute?

The HTML <source> element itself does not have an alt attribute. It is used inside a <picture> (or <video> / <audio>) element to provide alternate sources for the media.

In case of images, it is used along with an <img> element, to provide alternate sources for the image (that best matches the capabilities of the display device). Whichever version of the image is selected, it is presented in the space occupied by the <img> element, and it also uses the same attributes as defined by the <img> element (including the alt attribute). 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>

In the example above, once the user agent selects the best match, alt="My Logo" (as defined on the <img> element) will be used as the alt attribute. In case none of the sources match, the <img> element itself is used as a fallback.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.