HTML Validation

HTML Guides for source

Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.

Scan Your Site Free

A “source” element that has a following sibling “source” element or “img” element with a “srcset” attribute must have a “media” attribute and/or “type” attribute.

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>

<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.

Bad value X for attribute “sizes” on element “source”: Bad media condition: Parse Error at Y

sizes only accepts a valid media condition list (e.g., (min-width: 600px) 50vw, 100vw); malformed media conditions or missing length values trigger this parse error.

Detailed explanation

Element: source in a picture or audio/video context. For responsive images, use attributes srcset, optional media, and optional sizes.
Attribute: sizes applies only when srcset contains width descriptors (e.g., 320w, 640w). It is a comma-separated list of:
- One or more media conditions followed by a length (e.g., (min-width: 800px) 50vw)
- A final fallback length with no media condition (e.g., 100vw)

Common parse errors:

Missing parentheses around conditions: min-width: 600px → (min-width: 600px)
Using invalid units or tokens: 50 (needs a length like 50vw or 50rem)
Missing length after a condition: (min-width: 800px)
Trailing commas or malformed separators
Using sizes while srcset uses pixel density descriptors (1x, 2x); sizes is ignored for x-descriptors and may confuse validators
Valid media condition syntax mirrors CSS media queries without the @media keyword. Use logical operators and, or, not per CSS Media Queries spec, and ensure spaces and colons are correct.

HTML examples

Correct responsive image with width descriptors and sizes

<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 viewport width units for simpler sizing

<img
src="photo-640.jpg"
srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1024.jpg 1024w"
sizes="(min-width: 900px) 50vw, 100vw"
alt="Sample photo">

Correct when using pixel density descriptors (omit sizes)

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

Fixing common mistakes

Add parentheses and a length:

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

Remove stray comma and ensure final fallback:

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

Minimal valid document example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Valid sizes Attribute</title>
</head>
<body>
  <img
    src="pic-800.jpg"
    srcset="pic-400.jpg 400w, pic-800.jpg 800w"
    sizes="(min-width: 600px) 50vw, 100vw"
    alt="Picture">
</body>
</html>

Bad value X for attribute “sizes” on element “source”: Expected units (one of “em”, “ex”, “ch”, “rem”, “cap”, “ic”, “vw”, “svw”, “lvw”, “dvw”, “vh”, “svh”, “lvh”, “dvh”, “vi”, “svi”, “lvi”, “dvi”, “vb”, “svb”, “lvb”, “dvb”, “vmin”, “svmin”, “lvmin”, “dvmin”, “vmax”, “svmax”, “lvmax”, “dvmax”, “cm”, “mm”, “q”, “in”, “pc”, “pt”, “px”) but found Y at Z.

sizes
source

Use a valid media length in the sizes attribute; each slot’s length must include a unit (e.g., px, vw) and cannot be unitless.

Detailed explanation

The sizes attribute on responsive images (<img> or <source> within <picture>) specifies, for each media condition, the slot size that the image will occupy in the layout. Each size value must be a valid CSS length with units, or the keyword auto (for <img> only; not useful with <source>). Unitless numbers (e.g., 300) are invalid; use 300px. Percentages are not allowed in sizes. Valid units include: px, em, rem, vw, vh, and the full set listed by the validator (e.g., svw, lvh, cm, etc.).

Common pitfalls:

Missing units: sizes="(min-width: 768px) 600, 100vw" → 600 must be 600px.
Using %: sizes="50%" is invalid; use a viewport unit like 50vw.
Malformed list: values must be comma-separated media conditions followed by a length, ending with a fallback length.
Putting sizes on <source> is valid, but syntax must match the same rules as on <img>.

Reference keywords:

sizes
srcset
media (on <source>)
CSS length units

Valid pattern

With conditions: sizes="(media-condition) length, ... , fallback-length"
Without conditions: sizes="fallback-length"

HTML examples

Fix missing units

Before (invalid):

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

After (valid):

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

Replace percentage with viewport units

Before (invalid):

<picture>
  <source
    media="(min-width: 600px)"
    srcset="card-600.webp 600w, card-900.webp 900w"
    sizes="50%">
  <img
    src="card-600.jpg"
    srcset="card-600.jpg 600w, card-900.jpg 900w"
    sizes="50%"
    alt="Product card">
</picture>

After (valid):

<picture>
  <source
    media="(min-width: 600px)"
    srcset="card-600.webp 600w, card-900.webp 900w"
    sizes="50vw">
  <img
    src="card-600.jpg"
    srcset="card-600.jpg 600w, card-900.jpg 900w"
    sizes="50vw"
    alt="Product card">
</picture>

Clean, minimal example with multiple slots

<picture>
  <source
    type="image/avif"
    srcset="banner-480.avif 480w, banner-960.avif 960w, banner-1440.avif 1440w"
    sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw">
  <img
    src="banner-480.jpg"
    srcset="banner-480.jpg 480w, banner-960.jpg 960w, banner-1440.jpg 1440w"
    sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw"
    alt="Responsive banner">
</picture>

If the validator reports “found Y at Z,” inspect the exact character at position Z for a missing unit, stray %, or malformed comma/whitespace, then replace with a valid CSS length unit.

Bad value X for attribute “srcset” on element “source”: Must contain one or more image candidate strings.

The <source> element is used inside <picture>, <audio>, or <video> elements to specify alternative media resources. When used inside a <picture> element, the srcset attribute is required and must contain one or more comma-separated image candidate strings. Each image candidate string consists of a URL and an optional descriptor — either a width descriptor like 400w or a pixel density descriptor like 2x.

This validation error typically occurs when:

The srcset attribute is present but empty (srcset="").
The attribute value contains only whitespace.
The value is malformed or contains syntax errors (e.g., missing URLs, invalid descriptors).
A dynamic templating system or CMS outputs the attribute with no value.

Why this matters

Browsers rely on the srcset attribute to select the most appropriate image to display based on the user’s device capabilities, viewport size, and network conditions. An empty or invalid srcset means the browser cannot perform this selection, potentially resulting in no image being displayed at all. This degrades the user experience, harms accessibility (screen readers and assistive technologies may encounter unexpected behavior), and violates the HTML specification as defined by the WHATWG living standard.

How to fix it

Provide at least one valid image URL in the srcset attribute.
Optionally add descriptors — use width descriptors (w) when combined with the sizes attribute, or pixel density descriptors (x) for fixed-size images.
If you have no image to provide, remove the <source> element entirely rather than leaving srcset empty.
Check dynamic output — if a CMS or templating engine generates the srcset value, add a conditional check to omit the <source> element when no images are available.

Examples

❌ Empty srcset attribute

<picture>
  <source srcset="" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>

This triggers the error because srcset is present but contains no image candidate strings.

❌ Invalid descriptor syntax

<picture>
  <source srcset="photo.webp 400" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>

This is invalid because 400 is not a recognized descriptor — it must be 400w or a density descriptor like 2x.

✅ Single image candidate

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>

A single URL without a descriptor is valid and serves as the default 1x candidate.

✅ Multiple candidates with width descriptors

<picture>
  <source
    srcset="photo-small.webp 400w, photo-medium.webp 800w, photo-large.webp 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
    type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>

This provides three image candidates with width descriptors, allowing the browser to choose the best match based on the viewport and display density.

✅ Multiple candidates with pixel density descriptors

<picture>
  <source srcset="photo.webp 1x, photo-2x.webp 2x" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>

Pixel density descriptors tell the browser which image to use based on the device’s pixel ratio — 1x for standard displays and 2x for high-DPI (Retina) screens.

✅ Removing the source element when no image is available

If your application dynamically generates the srcset value and sometimes has no image to provide, omit the <source> element entirely:

<picture>
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>

This is valid because the <img> element inside <picture> serves as the required fallback and can stand alone.

✓ HTML validation on every page

✓ Accessibility checks (WCAG / Axe)

✓ Scheduled automatic reports

✓ Up to 5,000 pages per report

From $19/month Compare plans →

Category: HTML Validation
Engine: W3C Validator
Total guides: 4

Browse by Tag

CSS a aria auto autocomplete bad value button charset css doctype encoding end tag heading height href html http-equiv id iframe img input label lang link media meta name nesting not allowed obsolete parse error property role script section select sizes source src srcset start tag stray svg table td tel th type utf-8 video width xmlns

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial