HTML Guides for comma

A srcset value that begins with a comma has an empty first image candidate, which usually means the URL that should come before that comma was never filled in.

srcset holds a comma-separated list of image candidate strings. Each one is a URL, optionally followed by a width descriptor such as 800w or a pixel density descriptor such as 2x. When the value starts with a comma, or with spaces and then a comma, nothing comes before the first separator, and the validator reports an empty candidate at the start of the list.

The usual source is a template that writes srcset="{{ image }}, {{ image_2x }} 2x" and prints the attribute even when the image fields are empty. With only the first field missing, the value becomes , hero-2x.webp 2x. With both missing, it becomes , 2x. Browsers skip the leading comma, so in that second case they read 2x as the image URL. Inside <picture>, the browser picks that <source> and requests a file called 2x instead of using the <img> fallback, and the image fails to load.

Fill in the missing URL, or leave the <source> out when there is no image for it. The <img> inside <picture> still provides the fallback.

Invalid example

<picture>

<source srcset=", hero-2x.webp 2x" type="image/webp">

<img src="hero.jpg" alt="A mountain lake at sunrise">

</picture>

Valid example

<picture>

<source srcset="hero.webp, hero-2x.webp 2x" type="image/webp">

<img src="hero.jpg" alt="A mountain lake at sunrise">

</picture>

When no WebP version exists, drop the <source>:

<picture>

<img src="hero.jpg" alt="A mountain lake at sunrise">

</picture>

The values of the padding property are separated by spaces, not commas: write padding: 10px 20px, not padding: 10px, 20px.

padding is a shorthand that takes one to four lengths or percentages. One value applies to all four sides. Two values set the top and bottom, then the left and right. Three set the top, then left and right, then the bottom. Four go clockwise from the top: top, right, bottom, left.

In CSS a comma separates the items of a list, such as the fonts in font-family or the layers in box-shadow. padding doesn't take a list, so the validator reports the comma as an incorrect operator. Browsers drop the whole declaration, and the element keeps whatever padding an earlier rule gave it, or none. The habit often comes from JavaScript, or from CSS functions like rgb(255, 0, 0) where commas separate the arguments.

Invalid example

<div style="padding: 10px, 20px;">

<p>Card content</p>

</div>

Valid example

<div style="padding: 10px 20px;">

<p>Card content</p>

</div>