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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-src-on-element-script-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 a `<script>` element tells the browser where to fetch an external JavaScript file. According to the HTML specification, when the `src` attribute is present, its value must be a valid non-empty URL. An empty string does not qualify as a valid URL, so the validator flags it as an error.

This issue typically arises in a few common scenarios:

- **Templating or CMS placeholders** — A template engine or content management system outputs an empty `src` when no script URL is configured.
- **Dynamic JavaScript** — Client-side code is intended to set the `src` later, but the initial HTML ships with an empty value.
- **Copy-paste mistakes** — The attribute was added in anticipation of a script file that was never specified.

Beyond failing validation, an empty `src` causes real problems. Most browsers interpret an empty `src` as a relative URL that resolves to the current page's URL. This means the browser will make an additional HTTP request to re-fetch the current HTML document and attempt to parse it as JavaScript, wasting bandwidth, slowing down page load, and potentially generating console errors. It can also cause unexpected side effects in server logs and analytics.

## How to Fix It

Choose the approach that matches your intent:

1. **Provide a valid URL** — If you need an external script, set `src` to the correct file path or full URL.
2. **Use an inline script** — If your JavaScript is written directly in the HTML, remove the `src` attribute entirely. Note that when `src` is present, browsers ignore any content between the opening and closing `<script>` tags.
3. **Remove the element** — If the script isn't needed, remove the `<script>` element altogether.

Also keep in mind:

- Ensure the file path is correct relative to the HTML file's location.
- If using an absolute URL, verify it is accessible and returns JavaScript content.
- If a script should only be loaded conditionally, handle the condition in your server-side or build logic rather than outputting an empty `src`.

## Examples

### ❌ Invalid: Empty `src` attribute

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

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

### ❌ Invalid: Whitespace-only `src` attribute

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

A value containing only whitespace is also not a valid URL and will produce the same error.

### ✅ Fixed: Valid external script

```html
<script src="js/app.js"></script>
```

The `src` attribute contains a valid relative URL pointing to an actual JavaScript file.

### ✅ Fixed: Valid external script with a full URL

```html
<script src="https://example.com/js/library.min.js"></script>
```

### ✅ Fixed: Inline script without `src`

If you want to write JavaScript directly in your HTML, omit the `src` attribute:

```html
<script>
  console.log("This is an inline script.");
</script>
```

### ✅ Fixed: Conditionally omitting the element

If the script URL comes from a template variable that might be empty, handle it at the template level so the `<script>` element is only rendered when a URL is available. For example, in a templating language:

```html
<!-- Pseudocode — only output the tag when the URL exists -->
<!-- {% if script_url %} -->
<script src="analytics.js"></script>
<!-- {% endif %} -->
```

This prevents the empty `src` from ever reaching the browser.