HTML Guides for empty value

The src attribute appears as a bare name, with no = and no value, which leaves the element with an empty URL.

HTML lets you drop the value only on boolean attributes such as disabled, hidden or async, where having the attribute at all is what counts. src holds the address of the image, script, frame or media file to load, so it needs one. The parser reads <img src> as <img src="">, and the validator pairs this warning with an error on the same element saying the src value must be non-empty. The IE7 note comes from a time when that browser could drop attributes written this way. IE7 is long gone, but the empty URL still breaks the element.

A browser has nothing to fetch for an empty src. An <img> loads no image and fires its error event, and a <script> fires error without running. The bare src often comes from a lazy-loading script that keeps the real address in data-src until the image scrolls into view, or from a template whose image variable printed nothing.

Put the real URL in src. The native loading="lazy" attribute defers the download without any script. If there's no image to show, leave the <img> out of the page instead of printing it with an empty src.

Invalid example

<img src alt="Our team" data-src="/images/team.jpg" class="lazyload">

Valid example

<img src="/images/team.jpg" alt="Our team" loading="lazy">

The is attribute on the <a> element is present but set to an empty string. This attribute names a customized built-in element, so it must hold a valid custom element name and cannot be empty.

The is attribute tells the browser to upgrade a standard element into a customized built-in element. You register one in JavaScript with customElements.define("fancy-link", FancyLink, { extends: "a" }), then write <a is="fancy-link"> to apply it. The value has to match a registered custom element name, which is always non-empty and contains a hyphen. An empty is="" names nothing, so the validator rejects it.

In practice this usually comes from a template that prints is="" when the variable feeding it is blank. If the element is not meant to be a customized built-in, remove the is attribute entirely. If it is, set the name of the element you registered.

Note that Safari does not support customized built-in elements, so many projects avoid is and use autonomous custom elements (a hyphenated tag such as <fancy-link>) instead.

Invalid example

<a is="" href="/pricing">Pricing</a>

Valid example

Remove is when the link is an ordinary anchor:

<a href="/pricing">Pricing</a>

Or give it the name of a registered customized built-in element:

<a is="fancy-link" href="/pricing">Pricing</a>

The is attribute on the <img> element is present but set to an empty string. This attribute names a customized built-in element, so it must hold a valid custom element name and cannot be empty.

A customized built-in element is a standard element with your own behavior added on top. You register one in JavaScript with customElements.define("lazy-image", LazyImage, { extends: "img" }), then write <img is="lazy-image"> to apply it. Custom element names always contain a hyphen. An empty is="" names nothing, so the validator rejects it.

This usually comes from a CMS or template that prints is="" when the variable behind it is blank. If the image is an ordinary <img>, remove the attribute. If it is meant to use a customized built-in element, set the name you registered.

Safari doesn't support customized built-in elements and ignores is, so many projects use an autonomous custom element (a hyphenated tag such as <lazy-image>) instead.

Invalid example

<img is="" src="/images/team.jpg" alt="Our support team at the front desk">

Valid example

Remove is when the image is an ordinary <img>:

<img src="/images/team.jpg" alt="Our support team at the front desk">

Or give it the name of a registered customized built-in element:

<img is="lazy-image" src="/images/team.jpg" alt="Our support team at the front desk">

The itemprop attribute needs at least one property name, so an empty value such as itemprop="" is invalid on any element.

itemprop belongs to HTML microdata. It marks an element as a property of the item created by its nearest itemscope ancestor, and its value is a space-separated list of property names, such as headline, image or author, or absolute URLs. An empty string, or a value made only of spaces, contains no names, and the validator reports it together with the element that carries it.

Empty values usually come from a theme or template that always prints the attribute and fills it in only when a property is configured. The microdata processing model skips any element whose itemprop has no names, so the attribute adds nothing to the item. On an <img>, the property value would be the image URL from src, and that value is lost.

Either write the property name your vocabulary defines (for a Schema.org Article, the main picture is image) or remove the attribute. Removing it is the right fix when the element sits outside any itemscope, because a named itemprop there triggers a different error saying the element is not a property of any item.

Invalid example

<article itemscope itemtype="https://schema.org/Article">

<h1 itemprop="headline">Spring hiking routes</h1>

<img src="trail.jpg" alt="A trail along a cliff" itemprop="">

</article>

Valid example

<article itemscope itemtype="https://schema.org/Article">

<h1 itemprop="headline">Spring hiking routes</h1>

<img src="trail.jpg" alt="A trail along a cliff" itemprop="image">

</article>

Without microdata, drop the attribute:

<article>

<h1>Spring hiking routes</h1>

<img src="trail.jpg" alt="A trail along a cliff">

</article>

The src attribute has to contain a URL whenever it's present, so src="" or a value made only of spaces is invalid on every element that takes it.

The validator reports this on <img>, <iframe>, <script>, <video>, <audio>, <source>, <track>, <embed> and <input type="image">. A bare src with no value counts as empty too, and gets a second warning of its own.

The empty value usually comes from a template or CMS that prints src even when the URL field is blank, or from markup that waits for a script to fill in the URL. Write the attribute only when there is a URL, and leave out the whole element when it's useless without one.

Whether you can just drop src depends on the element:

• <img> needs src or srcset, so removing the attribute only swaps this error for another one. Output the image only when you have its URL. For lazy loading, keep the real URL in src and add loading="lazy". If a script copies the real URL from data-src later, put a small placeholder image in src until then. Keep a meaningful alt either way, since that text is what people get when the image doesn't load.
• <iframe> works without src. For a frame that a script fills in later, leave src out or write about:blank, then set the real URL from the script. Browsers already load about:blank for an empty src, so writing it out changes nothing on screen. To embed a piece of HTML rather than a URL, use srcdoc.
• <script> with inline code shouldn't have src at all. Browsers ignore the code between the tags whenever src is present, and an empty src just fails to load, so that code never runs. The validator reports the inline code too.
• <video> and <audio> take either a src attribute or <source> children, not both. A src attribute, even an empty one, makes the browser ignore the <source> elements, so nothing plays even when each of them points to a real file. That's also why the validator reports those <source> children as not allowed. Remove src and keep the <source> list, or put the real URL in src and drop the <source> elements.
• <source> and <track> require src, so give the real URL or remove the element. Browsers skip a <source> with an empty src and try the next one, and if it was the only one, the media doesn't play. Inside <picture>, <source> takes srcset instead, and a src there triggers a different error.
• <embed> and <input type="image"> need the URL of the file they show. An image button that has no image is better written as a plain <button>.

Invalid example

<img src="" alt="Our team at the spring meetup">

<iframe src="" title="Store locations map"></iframe>

<script src="">

document.documentElement.classList.add("js");

</script>

<video controls width="640" height="360" src="">

<source src="/media/product-tour.mp4" type="video/mp4">

<source src="/media/product-tour.webm" type="video/webm">

</video>

<audio controls>

<source src="/media/episode-12.ogg" type="audio/ogg">

<source src=" " type="audio/mpeg">

</audio>

Valid example

Give each element its real URL, and drop src where the files or the code are already inside the element:

<img src="/images/team.jpg" alt="Our team at the spring meetup" loading="lazy">

<iframe src="/maps/stores.html" title="Store locations map"></iframe>

<script>

document.documentElement.classList.add("js");

</script>

<video controls width="640" height="360">

<source src="/media/product-tour.mp4" type="video/mp4">

<source src="/media/product-tour.webm" type="video/webm">

</video>

<audio controls>

<source src="/media/episode-12.ogg" type="audio/ogg">

<source src="/media/episode-12.mp3" type="audio/mpeg">

</audio>

When a script loads the image or the frame later, start with a placeholder image and a blank frame:

<img src="/images/placeholder.svg" data-src="/images/team.jpg" alt="Our team at the spring meetup">

<iframe src="about:blank" title="Store locations map" id="store-map"></iframe>

<script>

document.getElementById("store-map").src = "/maps/stores.html";

</script>