Guías HTML para media

The <picture> element exists to give browsers a choice between multiple image sources. The browser evaluates each <source> in order, looking for the first one whose conditions match the current environment. These conditions are expressed through the media attribute (e.g., viewport width or resolution) and the type attribute (e.g., image/webp or image/avif). If a <source> lacks both attributes, it acts as an unconditional match — the browser will always select it, making any subsequent <source> elements or an <img> with srcset unreachable. This defeats the purpose of the <picture> element entirely.

The HTML specification requires these attributes specifically to prevent this situation. When a <source> has a following sibling <source> or a following <img> with srcset, at least one selection criterion (media or type) must be present so the browser can meaningfully choose between the options. A <source> without these attributes is only valid if it’s the last <source> before a plain <img> (one without srcset), since in that case it serves as the final fallback within the <picture>.

This matters for several reasons:

• Standards compliance: The HTML living standard explicitly defines this requirement. Violating it produces a validation error.
• Predictable rendering: Without distinguishing attributes, browsers may silently ignore sources or always pick the first one, leading to inconsistent behavior across browsers.
• Performance: The <picture> element is often used to serve smaller images on small viewports or modern formats like WebP and AVIF to browsers that support them. Without proper media or type attributes, these optimizations won’t work as intended.

How to fix it

Add a media attribute, a type attribute, or both to each <source> element that is followed by another <source> or an <img> with srcset:

• Use type when you’re offering the same image in different formats (e.g., AVIF, WebP, JPEG). The browser picks the first format it supports.
• Use media when you’re serving different images based on viewport conditions (art direction). The browser picks the source whose media query matches.
• Use both when you want to combine format negotiation with art direction.

Examples

Incorrect — <source> without media or type

Each <source> below has no selection criterion, so the browser has no way to choose between them:

<picture>
  <source srcset="hero.webp">
  <source srcset="hero.jpg">
  <img src="hero.jpg" srcset="hero-2x.jpg 2x" alt="A mountain landscape">
</picture>

Correct — using type for format negotiation

Adding type lets the browser pick the first format it supports:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" srcset="hero-2x.jpg 2x" alt="A mountain landscape">
</picture>

Correct — using media for art direction

Adding media lets the browser pick the source that matches the viewport:

<picture>
  <source srcset="hero-wide.jpg" media="(min-width: 1024px)">
  <source srcset="hero-narrow.jpg" media="(max-width: 1023px)">
  <img src="hero-narrow.jpg" srcset="hero-narrow-2x.jpg 2x" alt="A mountain landscape">
</picture>

Correct — combining media and type

You can use both attributes together to serve the right format at the right viewport size:

<picture>
  <source srcset="hero-wide.avif" media="(min-width: 1024px)" type="image/avif">
  <source srcset="hero-wide.webp" media="(min-width: 1024px)" type="image/webp">
  <source srcset="hero-narrow.avif" media="(max-width: 1023px)" type="image/avif">
  <source srcset="hero-narrow.webp" media="(max-width: 1023px)" type="image/webp">
  <img src="hero-narrow.jpg" alt="A mountain landscape">
</picture>

Correct — single <source> before a plain <img>

When there’s only one <source> and the <img> has no srcset, no media or type is required — but adding type is still recommended for clarity:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="A mountain landscape">
</picture>

The media attribute tells the browser under which conditions a linked stylesheet (or other resource) should be applied. Its value must be a valid media query list as defined by the CSS Media Queries specification. When the W3C HTML Validator reports a parse error for this attribute, it means the value couldn’t be parsed as a valid media query. The browser may ignore the attribute entirely or behave unpredictably, potentially loading the stylesheet in all conditions or not at all.

Common causes of this error include:

• Typos in media types or features — e.g., scrren instead of screen, or max-widht instead of max-width.
• Missing parentheses around media features — e.g., max-width: 600px instead of (max-width: 600px).
• Invalid or stray characters — e.g., extra commas, semicolons, or unmatched parentheses.
• Using CSS syntax instead of media query syntax — e.g., writing @media screen or including curly braces.
• Incorrect logical operators — e.g., using or at the top level instead of a comma, or misspelling not or only.
• Server-side template placeholders left unresolved — e.g., media="{{mediaQuery}}" rendered literally.

Getting this right matters for standards compliance and predictable cross-browser behavior. Browsers are generally lenient and may try to recover from malformed media queries, but the recovery behavior isn’t guaranteed to be consistent. A broken media attribute can cause stylesheets to load when they shouldn’t (wasting bandwidth) or not load when they should (breaking layout). It also affects performance, since browsers use the media attribute to prioritize resource loading.

To fix the issue, verify that your media value is a syntactically correct media query. Use valid media types (screen, print, all), wrap media features in parentheses, and separate multiple queries with commas.

Examples

Incorrect: missing parentheses around media feature

<!-- ❌ Parse error: media features must be wrapped in parentheses -->

<link rel="stylesheet" href="responsive.css" media="max-width: 600px">

Correct: parentheses around media feature

<link rel="stylesheet" href="responsive.css" media="(max-width: 600px)">

Incorrect: typo in media type

<!-- ❌ Parse error: "scrren" is not a valid media type -->

<link rel="stylesheet" href="styles.css" media="scrren">

Correct: valid media type

<link rel="stylesheet" href="styles.css" media="screen">

Incorrect: using or instead of a comma to separate queries

<!-- ❌ Parse error: top-level "or" is not valid between media queries -->

<link rel="stylesheet" href="styles.css" media="screen or print">

Correct: comma-separated media query list

<link rel="stylesheet" href="styles.css" media="screen, print">

Incorrect: stray semicolon in the value

<!-- ❌ Parse error: semicolons are not valid in media queries -->

<link rel="stylesheet" href="styles.css" media="screen; (max-width: 768px)">

Correct: combining media type and feature with and

<link rel="stylesheet" href="styles.css" media="screen and (max-width: 768px)">

More valid media query examples

<!-- Simple media type -->

<link rel="stylesheet" href="print.css" media="print">

<!-- Apply to all media (default behavior, but explicit) -->

<link rel="stylesheet" href="base.css" media="all">

<!-- Multiple conditions with "and" -->

<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1024px)">

<!-- Using "not" to exclude a media type -->

<link rel="stylesheet" href="no-print.css" media="not print">

<!-- Multiple queries separated by commas (logical OR) -->

<link rel="stylesheet" href="special.css" media="(max-width: 600px), (orientation: portrait)">

<!-- Prefers-color-scheme for dark mode -->

<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

If you’re unsure whether your media query is valid, try testing it in a browser’s developer tools by adding a <style> block with @media and the same query — if the browser highlights it as invalid, the same value will fail in the media attribute.

The media attribute on a <link> element specifies which media or device types the linked resource (typically a stylesheet) is designed for. It accepts a valid media query or a comma-separated list of media types. In the current CSS specification (Media Queries Level 4), only three media types remain valid: all, screen, and print. All other media types from older specifications — including projection, handheld, tv, tty, braille, embossed, and aural — have been deprecated.

The projection media type was originally intended to target presentation and projector-based displays. In practice, browser support for it was extremely limited (only Opera had meaningful support), and the use case never gained traction. The CSS Working Group deprecated it because the distinction between a “screen” and a “projection” display is no longer meaningful — modern browsers treat projectors, external displays, and monitors uniformly under the screen type.

Why this matters

• Standards compliance: Using deprecated media types causes W3C validation errors, which can signal broader code quality issues.
• No practical effect: Modern browsers simply ignore unrecognized media types. If projection is the only value in your media attribute, the stylesheet may not load at all in some browsers. If it appears alongside screen, the browser loads the stylesheet based on the screen match and silently discards projection — meaning the deprecated value adds nothing.
• Maintainability: Keeping deprecated values in your code can confuse other developers and create the false impression that the stylesheet has special behavior for projectors.

How to fix it

1. Remove projection from the media attribute value.
2. If screen or another valid type was already listed alongside projection, keep the valid type.
3. If projection was the only value, replace it with screen (since projectors are treated as screens by modern browsers).
4. If the stylesheet should apply universally, remove the media attribute entirely or set it to all.

Examples

Incorrect

Using the deprecated projection media type alongside screen:

<link rel="stylesheet" href="style.css" media="screen, projection">

Using projection as the sole media type:

<link rel="stylesheet" href="slides.css" media="projection">

Correct

Remove projection and keep the valid screen type:

<link rel="stylesheet" href="style.css" media="screen">

Replace projection with screen, since projectors are handled as screens:

<link rel="stylesheet" href="slides.css" media="screen">

Target both screens and print:

<link rel="stylesheet" href="style.css" media="screen, print">

If the stylesheet should apply to all devices, omit the media attribute (which defaults to all):

<link rel="stylesheet" href="style.css">

Or explicitly set it to all:

<link rel="stylesheet" href="style.css" media="all">

Using media queries instead of media types

If you need more granular control over when a stylesheet applies — for example, targeting large displays commonly used for presentations — you can use a media query with feature conditions instead of relying on deprecated media types:

<link rel="stylesheet" href="presentation.css" media="screen and (min-width: 1920px)">

This approach is standards-compliant and gives you far more precise targeting than the old media types ever provided.

The media attribute on a <link> element specifies the conditions under which the linked resource should apply. It accepts either a simple media type or a full media query. When the validator reports “unrecognized media,” it means the value you provided doesn’t match any known media type or valid media query syntax.

Several older media types that were defined in earlier CSS specifications have been deprecated. Types like handheld, projection, tv, tty, aural, braille, and embossed are no longer recognized as valid. Modern CSS and HTML only support three media types: all, screen, and print. If you’re using a deprecated type, you should replace it with an appropriate modern media query that targets the device characteristics you need.

Beyond deprecated types, this error also occurs when a media query expression is malformed — for example, missing parentheses around a feature expression, using an unknown feature name, or having a typo in the value.

Why this matters

• Standards compliance: Using unrecognized media types means your HTML doesn’t conform to the current HTML and CSS specifications.
• Browser behavior: Browsers may ignore the entire <link> element or apply the resource unconditionally when they encounter an unrecognized media type, leading to unexpected results.
• Performance: The media attribute helps browsers prioritize resource loading. A valid media query allows the browser to defer loading stylesheets that don’t match the current context (e.g., print stylesheets), improving page load performance.

How to fix it

1. Replace deprecated media types with screen, print, or all, or use modern media queries that target specific device features.
2. Check for typos in your media type or query expression.
3. Validate your media query syntax — feature expressions must be wrapped in parentheses and use recognized feature names like max-width, orientation, or prefers-color-scheme.

Examples

Incorrect: using a deprecated media type

<link rel="stylesheet" href="mobile.css" media="handheld">

The handheld media type is deprecated and will trigger the validation error.

Incorrect: misspelled media type

<link rel="stylesheet" href="styles.css" media="screen">

Incorrect: malformed media query

<link rel="stylesheet" href="responsive.css" media="max-width: 768px">

The feature expression is missing its surrounding parentheses.

Correct: using valid media types

<link rel="stylesheet" href="general.css">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="screen.css" media="screen">

When no media attribute is specified, it defaults to all.

Correct: replacing deprecated types with modern media queries

Instead of media="handheld", use a media query that targets small screens or specific device capabilities:

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

Correct: using complex media queries

<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="portrait.css" media="screen and (orientation: portrait)">
<link rel="stylesheet" href="large.css" media="screen and (min-width: 1200px)">

Valid media types reference

For anything more specific than these three types, use media feature expressions like (max-width: 600px), (hover: hover), or (prefers-reduced-motion: reduce) to target the exact device characteristics you need.

The sizes attribute tells the browser how wide an image will be displayed under different viewport conditions, allowing it to choose the best candidate from srcset before the page layout is calculated. Its value is a comma-separated list where each entry (except optionally the last) pairs a media condition with a CSS length. The final entry can be a bare length that serves as the default fallback. The full syntax looks like this:

(media-condition) length, (media-condition) length, fallback-length

Media conditions use the same grammar as CSS media queries. They must be enclosed in parentheses and can use logical operators like and, or, and not to combine sub-expressions. The slot size (length) that follows each condition must use a valid CSS length unit such as px, em, rem, vw, vh, vmin, vmax, or ch. Percentages are not valid in sizes slot lengths, and unitless numbers (other than 0) are also invalid.

This error matters for several reasons. First, if the browser cannot parse the sizes value, it falls back to a default of 100vw, which may cause it to download an unnecessarily large image — hurting performance and wasting bandwidth. Second, an invalid sizes attribute signals a misunderstanding of responsive image markup that could lead to layout or rendering issues. Third, standards-compliant HTML ensures consistent behavior across all browsers.

Common Parse Errors

Here are the most frequent mistakes that trigger this validation error:

• Missing parentheses around the media condition. Writing min-width: 600px instead of (min-width: 600px).
• Missing slot size after a condition. Each media condition must be followed by a length value, e.g., (min-width: 600px) 50vw. Writing (min-width: 600px), 100vw without a slot size after the condition is invalid — the browser interprets (min-width: 600px) alone as the entry.
• Using percentages as slot sizes. Values like 50% are not allowed; use viewport-relative units like 50vw instead.
• Unitless numbers. A slot size of 300 is invalid; it must be 300px or another valid length.
• Trailing or extra commas. A trailing comma after the last entry or double commas between entries will cause a parse error.
• Mixing up range syntax. Modern media query range syntax like (width >= 600px) is valid, but hybrid forms like (min-width <= 600px) are not. Use either the traditional (min-width: 600px) or the range form (width >= 600px).
• Invalid tokens or typos. Misspelled feature names (e.g., min-widht) or unsupported tokens will break parsing.

How to Fix

1. Wrap every media condition in parentheses. Even simple conditions need them: (min-width: 600px).
2. Follow each condition with a valid length. For example, (min-width: 600px) 50vw.
3. End with a fallback length. The last item should be a bare length with no media condition, like 100vw.
4. Use valid CSS length units for slot sizes — px, em, rem, vw, vh, etc. Never use %.
5. Ensure your srcset uses w descriptors that match the intrinsic pixel widths of the image files, since sizes only works with width descriptors.

Examples

Incorrect: missing parentheses and missing slot size

The media condition lacks parentheses, and there is no slot size telling the browser how wide the image will be when the condition matches.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="min-width: 600px, 100vw"
  alt="A mountain landscape">

Correct: parentheses and slot size added

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(min-width: 600px) 50vw, 100vw"
  alt="A mountain landscape">

Incorrect: percentage used as slot size

<img
  src="banner-1200.jpg"
  srcset="banner-600.jpg 600w, banner-1200.jpg 1200w"
  sizes="(min-width: 768px) 50%, 100%"
  alt="Promotional banner">

Correct: viewport units instead of percentages

<img
  src="banner-1200.jpg"
  srcset="banner-600.jpg 600w, banner-1200.jpg 1200w"
  sizes="(min-width: 768px) 50vw, 100vw"
  alt="Promotional banner">

Incorrect: trailing comma

<img
  src="icon-256.png"
  srcset="icon-128.png 128w, icon-256.png 256w"
  sizes="(min-width: 1024px) 128px, 64px,"
  alt="App icon">

Correct: trailing comma removed

<img
  src="icon-256.png"
  srcset="icon-128.png 128w, icon-256.png 256w"
  sizes="(min-width: 1024px) 128px, 64px"
  alt="App icon">

Incorrect: invalid range syntax mixing traditional and modern forms

<img
  src="hero-1600.jpg"
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(min-width <= 600px) 100vw, 50vw"
  alt="Hero image">

Correct: using proper range syntax

<img
  src="hero-1600.jpg"
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(width <= 600px) 100vw, 50vw"
  alt="Hero image">

Multiple conditions with a fallback

This example shows a fully valid sizes attribute with several breakpoints, combining traditional and modern range syntax across entries.

<img
  src="article-1200.jpg"
  srcset="article-400.jpg 400w, article-800.jpg 800w, article-1200.jpg 1200w"
  sizes="(min-width: 1200px) 33vw, (min-width: 768px) 50vw, 100vw"
  alt="Article thumbnail">

Using calc() in slot sizes

You can use calc() for more precise slot sizes. This is fully valid in the sizes attribute.

<img
  src="card-800.jpg"
  srcset="card-400.jpg 400w, card-800.jpg 800w"
  sizes="(min-width: 960px) calc(33.33vw - 2rem), calc(100vw - 2rem)"
  alt="Product card">

The sizes attribute tells the browser how wide an image will be displayed at different viewport sizes, so it can choose the best candidate from srcset. It only applies when srcset uses width descriptors (e.g., 480w, 800w). The value is a comma-separated list where:

1. Each entry (except the last) is a media condition in parentheses followed by a CSS length — for example, (min-width: 800px) 50vw.
2. The final entry is a fallback length with no media condition — for example, 100vw.

The browser evaluates the media conditions from left to right and uses the length from the first one that matches. If none match, it uses the fallback.

The media condition syntax mirrors CSS media queries but without the @media keyword. You can use logical operators like and, or, and not, and features like min-width, max-width, orientation, etc.

Why This Error Occurs

The validator parses the sizes value according to the HTML living standard and CSS Media Queries specification. A parse error is triggered when the value doesn’t conform to the expected grammar. Common causes include:

• Missing parentheses around the media condition: min-width: 600px 50vw instead of (min-width: 600px) 50vw.
• Missing length after a media condition: (min-width: 800px) with no length following it.
• Invalid or missing units on the length: 50 instead of 50vw, 50px, or 50rem.
• Trailing commas or extra separators: (min-width: 600px) 50vw, , 100vw.
• Invalid media feature syntax: typos like (minwidth: 600px) or using unsupported tokens.
• Using sizes with pixel-density descriptors: when srcset uses 1x, 2x instead of width descriptors, the sizes attribute is meaningless and can confuse validators.

Why It Matters

• Browser image selection: Browsers rely on a correctly parsed sizes value to pick the optimal image from srcset. A malformed value causes the browser to fall back to a default size (typically 100vw), which can result in downloading unnecessarily large images on small screens or blurry images on large screens.
• Standards compliance: Invalid sizes values violate the HTML specification and may behave unpredictably across different browsers.
• Performance: Correct sizes values are essential for responsive image optimization. Without them, you lose the bandwidth savings that srcset with width descriptors is designed to provide.

How to Fix It

1. Wrap every media condition in parentheses: (min-width: 600px), not min-width: 600px.
2. Always include a valid CSS length after each condition: (min-width: 600px) 50vw, not just (min-width: 600px).
3. End with a fallback length that has no condition: 100vw.
4. Use valid CSS length units: vw, px, em, rem, or calc() expressions.
5. Remove trailing or duplicate commas.
6. Omit sizes entirely if your srcset uses pixel-density descriptors (1x, 2x).

Examples

Incorrect: missing parentheses around the media condition

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="min-width: 600px 50vw, 100vw"
  alt="A landscape photo">

Correct: parentheses added

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(min-width: 600px) 50vw, 100vw"
  alt="A landscape photo">

Incorrect: missing length after the media condition

<img
  src="banner-800.jpg"
  srcset="banner-400.jpg 400w, banner-800.jpg 800w"
  sizes="(min-width: 700px), 100vw"
  alt="A promotional banner">

The first entry (min-width: 700px) has no length value — the comma makes it look like a separate entry, but it’s incomplete.

Correct: length added after the condition

<img
  src="banner-800.jpg"
  srcset="banner-400.jpg 400w, banner-800.jpg 800w"
  sizes="(min-width: 700px) 60vw, 100vw"
  alt="A promotional banner">

Incorrect: using sizes with pixel-density descriptors

<img
  src="avatar.jpg"
  srcset="avatar@1x.jpg 1x, avatar@2x.jpg 2x"
  sizes="(min-width: 600px) 80px, 40px"
  alt="User avatar">

The sizes attribute is only meaningful with width descriptors (w). When srcset uses density descriptors (1x, 2x), omit sizes.

Correct: sizes removed for density descriptors

<img
  src="avatar.jpg"
  srcset="avatar@1x.jpg 1x, avatar@2x.jpg 2x"
  alt="User avatar">

Incorrect: trailing comma

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w"
  sizes="(min-width: 800px) 800px, 100vw,"
  alt="Hero image">

Correct: trailing comma removed

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w"
  sizes="(min-width: 800px) 800px, 100vw"
  alt="Hero image">

Using sizes on a <source> inside <picture>

<picture>
  <source
    type="image/webp"
    srcset="hero-480.webp 480w, hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(min-width: 1200px) 1200px, (min-width: 800px) 800px, 100vw">
  <img
    src="hero-800.jpg"
    srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(min-width: 1200px) 1200px, (min-width: 800px) 800px, 100vw"
    alt="Hero image">
</picture>

Using compound media conditions

You can combine conditions with and:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(min-width: 900px) and (orientation: landscape) 50vw, 100vw"
  alt="A sample photo">

Full valid document

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Responsive Image Example</title>
  </head>
  <body>
    <img
      src="pic-800.jpg"
      srcset="pic-400.jpg 400w, pic-800.jpg 800w"
      sizes="(min-width: 600px) 50vw, 100vw"
      alt="A picture demonstrating valid sizes usage">
  </body>
</html>