An “img” Element Must Have An “alt” Attribute, Except Under Certain ...

Trang chủ » Html5 Img Alt Attribute » An “img” Element Must Have An “alt” Attribute, Except Under Certain ...

Có thể bạn quan tâm

A <source> element inside a <picture> that is followed by another <source> or an <img> with srcset must include a media and/or type attribute.

The <source> element is used inside <picture> for responsive images, allowing different resources to be loaded based on conditions such as viewport width (media) or image format (type). According to the HTML standard, when multiple <source> elements are present (or a following <img> with srcset), each <source> must provide a media and/or type attribute so the browser can choose the appropriate resource based on those hints.

Without media or type, the browser cannot distinguish when to use each source, which can lead to validation errors and unexpected rendering behavior.

Incorrect example (causes the validator error):

<picture><sourcesrcset="image1.webp"><sourcesrcset="image2.jpg"><imgalt=""src="fallback.jpg"srcset="fallback2x.jpg2x"></picture>

Correct examples (fixing the error):

<picture><sourcesrcset="image1.webp"type="image/webp"><sourcesrcset="image2.jpg"type="image/jpeg"><imgalt=""src="fallback.jpg"srcset="fallback2x.jpg2x"></picture>

or

<picture><sourcesrcset="image-small.jpg"media="(max-width:600px)"><sourcesrcset="image-large.jpg"media="(min-width:601px)"><imgalt=""src="fallback.jpg"srcset="fallback2x.jpg2x"></picture>

By specifying the media and/or type attributes for each <source>, you satisfy the HTML standard and resolve the W3C validator issue.

Từ khóa » Html5 Img Alt Attribute