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

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

The `|` (pipe) character is not allowed in URLs and must be percent-encoded as `%7C` in the `href` attribute of an `<a>` element.

URLs follow the syntax rules defined in [RFC 3986](https://www.rfc-editor.org/rfc/rfc3986). The pipe character is not among the allowed characters in the query component of a URI. When a URL contains a literal `|`, browsers will often handle it gracefully, but the HTML is technically invalid. The fix is to replace every `|` with its percent-encoded equivalent `%7C`.

This commonly appears when linking to external APIs, legacy systems, or content management platforms that use `|` as a delimiter in query strings.

## HTML examples

### Invalid example

```html
<a href="https://example.com/search?filters=color|size|price">Search</a>
```

### Valid example

```html
<a href="https://example.com/search?filters=color%7Csize%7Cprice">Search</a>
```

If the URLs are generated dynamically in JavaScript, `encodeURI()` or `encodeURIComponent()` will handle the encoding automatically:

```js
const filters = "color|size|price";
const url = `https://example.com/search?filters=${encodeURIComponent(filters)}`;
// Result: https://example.com/search?filters=color%7Csize%7Cprice
```