# Bad value “” for attribute “src” on element “iframe”: Must be non-empty.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-src-on-element-iframe-must-be-non-empty
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `src` attribute on an `<iframe>` tells the browser which document to load and display within the embedded frame. When you leave this attribute empty (`src=""`), the W3C HTML Validator reports an error because the HTML specification requires the value to be a valid, non-empty URL. An empty string doesn't resolve to a meaningful resource.

This is more than a cosmetic validation issue. When a browser encounters `src=""`, it typically interprets the empty string as a relative URL pointing to the current page, which causes the browser to re-fetch and embed the current document inside itself. This leads to unnecessary network requests, potential performance degradation, and unexpected rendering behavior. In some cases it can even cause infinite nesting loops or break page functionality.

From an accessibility standpoint, an empty `<iframe>` with no valid source provides no meaningful content to assistive technologies. Screen readers may announce the frame without being able to describe its purpose, creating a confusing experience for users.

## How to fix it

- **Provide a valid URL**: Set the `src` attribute to the actual URL of the content you want to embed.
- **Use `about:blank` for intentionally empty frames**: If you need an `<iframe>` in the DOM but don't have content to load yet (e.g., you plan to populate it later via JavaScript), use `src="about:blank"`. This is a valid URL that loads a blank page without triggering extra requests.
- **Remove the element**: If the `<iframe>` isn't needed, remove it from the markup entirely. You can dynamically create and insert it with JavaScript when you have content to load.
- **Use `srcdoc` instead**: If you want to embed inline HTML rather than loading an external URL, use the `srcdoc` attribute, which accepts an HTML string directly.

## Examples

### ❌ Empty `src` attribute

```html
<iframe src=""></iframe>
```

This triggers the validation error because the `src` value is an empty string.

### ❌ `src` attribute with only whitespace

```html
<iframe src="  "></iframe>
```

Whitespace-only values are also invalid URLs and will produce the same error.

### ✅ Valid URL in `src`

```html
<iframe src="https://example.com/map.html" title="Location map"></iframe>
```

A fully qualified URL is the most straightforward fix. Note the `title` attribute, which is recommended for accessibility so that assistive technologies can describe the frame's purpose.

### ✅ Using `about:blank` for a placeholder frame

```html
<iframe src="about:blank" title="Dynamic content area"></iframe>
```

This is a valid approach when you need the `<iframe>` in the DOM but plan to set its content later with JavaScript using `contentDocument.write()` or by updating the `src` attribute dynamically.

### ✅ Using `srcdoc` for inline content

```html
<iframe srcdoc="<p>Hello, embedded world!</p>" title="Inline content"></iframe>
```

The `srcdoc` attribute lets you embed HTML directly without needing an external URL. When `srcdoc` is present, it takes priority over `src`.

### ✅ Dynamically creating the iframe with JavaScript

```html
<div id="video-container"></div>
<script>
  const iframe = document.createElement("iframe");
  iframe.src = "https://example.com/video.html";
  iframe.title = "Video player";
  document.getElementById("video-container").appendChild(iframe);
</script>
```

If the source URL isn't available at page load, creating the `<iframe>` dynamically avoids having an empty `src` in your HTML altogether.