HTML Guide for media
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>
<source srcset="image1.webp">
<source srcset="image2.jpg">
<img alt="" src="fallback.jpg" srcset="fallback2x.jpg 2x">
</picture>Correct examples (fixing the error):
<picture>
<source srcset="image1.webp" type="image/webp">
<source srcset="image2.jpg" type="image/jpeg">
<img alt="" src="fallback.jpg" srcset="fallback2x.jpg 2x">
</picture>or
<picture>
<source srcset="image-small.jpg" media="(max-width: 600px)">
<source srcset="image-large.jpg" media="(min-width: 601px)">
<img alt="" src="fallback.jpg" srcset="fallback2x.jpg 2x">
</picture>By specifying the media and/or type attributes for each <source>, you satisfy the HTML standard and resolve the W3C validator issue.
The media attribute on a <link> element specifies the media for which the linked resource is intended, using a valid media query. The value indicated is not a valid media query, which leads to a parse error.
Explanation
The media attribute is used to define what type of device the linked stylesheet should be applied to. Examples include common media types like screen, print, or all, as well as more complex media queries, such as (max-width: 600px) for responsive designs.
Correct Usage
-
Media Type Only:
You can specify general media types such as screen, print, or all.
<link rel="stylesheet" href="styles.css" media="screen"> -
Media Query:
For more precise control, use a media query to target specific conditions.
<link rel="stylesheet" href="styles.css" media="(max-width: 600px)">
The media attribute on the link element cannot use the deprecated value projection; only valid CSS media types should be specified.
The media attribute specifies what media/device the linked resource is designed for, using a media query or a list of valid media types. In modern HTML and CSS, commonly accepted values include all, print, and screen.
The value projection was intended for projectors but has been deprecated and is no longer recognized by browsers or the HTML standard. To ensure validity and compatibility, remove projection and use only accepted types such as screen and/or print.
Incorrect example (with deprecated value):
<link rel="stylesheet" href="style.css" media="screen, projection">Correct examples:
<link rel="stylesheet" href="style.css" media="screen"><link rel="stylesheet" href="style.css" media="screen, print">If you intend your stylesheet for screens and print, you can use both screen, print; for only screens, use just screen. If the stylesheet should apply to all devices, you can omit the media attribute or use all:
<link rel="stylesheet" href="style.css">or
<link rel="stylesheet" href="style.css" media="all">The media attribute on a <link> element has not been recognized.
This attribute specified what media the linked resource is optimized for. As an example, the following will link a general stylesheet, and a specific one for printing:
<head>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>Valid values for this attribute include:
- all. Default, used for all media.
- print. Used for printers and print previews.
- screen. Used for computer, tablets or smartphone screens.