# Bad value X for attribute “href” on element “a”: Illegal character in scheme data: “[” is not allowed.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-href-on-element-a-illegal-character-in-scheme-data-square-bracket-is-not-allowed
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The W3C HTML Validator checks that URLs provided in `href` attributes conform to the URL specification. Square brackets (`[` and `]`) are reserved characters with very specific, limited uses in URLs — they are only permitted in the host portion of a URL to denote IPv6 addresses (e.g., `http://[::1]/`). When they appear elsewhere, such as in the scheme data, path, or query string without being percent-encoded, the URL is considered malformed.

This commonly happens in a few scenarios:

- **Mailto links** where someone wraps an email address in brackets, like `mailto:[user@example.com]`.
- **Template variables** that haven't been processed, leaving literal bracket syntax (e.g., `{{`, `[`, `]`) in the rendered HTML.
- **Manually constructed URLs** where brackets are mistakenly used as part of the path or query string instead of being percent-encoded as `%5B` and `%5D`.

Using invalid URLs can cause browsers to misinterpret the link destination, break navigation, or cause unexpected behavior. Assistive technologies such as screen readers also rely on well-formed URLs to correctly communicate link targets to users. Keeping your URLs standards-compliant ensures consistent, predictable behavior across all browsers and devices.

### How to fix it

1. **Remove unnecessary brackets.** If the brackets are not part of the actual data (e.g., decorative brackets around an email address), simply delete them.
2. **Percent-encode brackets when they are part of the data.** If you genuinely need square brackets in a URL's path or query string, encode `[` as `%5B` and `]` as `%5D`.
3. **Check your templating engine output.** If you use a templating system, inspect the final rendered HTML in a browser to make sure template syntax has been fully replaced with valid values.

## Examples

### Invalid: square brackets in a mailto URL

The brackets around the email address are not valid URL characters in this context.

```html
<a href="mailto:[user@example.com]">Email Us</a>
```

### Fixed: remove the brackets

```html
<a href="mailto:user@example.com">Email Us</a>
```

### Invalid: square brackets in a query string

```html
<a href="https://example.com/search?filter[status]=active">Search</a>
```

### Fixed: percent-encode the brackets

```html
<a href="https://example.com/search?filter%5Bstatus%5D=active">Search</a>
```

### Invalid: unprocessed template syntax in rendered HTML

If your templating engine fails to replace a variable, the final HTML may contain bracket characters:

```html
<a href="mailto:[% user.email %]">Email Us</a>
```

### Fixed: ensure the template renders a valid URL

Make sure the template variable resolves correctly. The rendered output should look like:

```html
<a href="mailto:user@example.com">Email Us</a>
```

In your template source, this might be written as:

```html
<a href="mailto:{{ user.email }}">Email Us</a>
```

The key is that the **final HTML** delivered to the browser must contain a valid, bracket-free URL (unless the brackets are properly percent-encoded). Always validate your rendered output, not just your template source, to catch issues like this.