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

A | (pipe) character in the fragment portion of a URL is not allowed without percent-encoding it as %7C.

The fragment is the part of a URL that comes after the # symbol. According to RFC 3986, fragments can only contain unreserved characters (A-Z, a-z, 0-9, -, ., _, ~), percent-encoded characters, sub-delimiters (!, $, &, ', (, ), *, +, ,, ;, =), :, @, /, and ?.

The pipe character | is not in any of those sets, so it must be percent-encoded as %7C when used in a URL fragment.

This issue commonly appears when fragment identifiers are auto-generated from headings or content that contains |, such as table-related text or wiki-style page anchors.

Invalid example

<a href="/page#section|intro">Go to section</a>

Valid example

Replace | with its percent-encoded equivalent %7C:

<a href="/page#section%7Cintro">Go to section</a>

If you control the target element's id, a better approach is to remove the pipe character from the id altogether and use only unreserved characters:

<h2 id="section-intro">Section intro</h2>
<a href="/page#section-intro">Go to section</a>

Learn more:

MDN Reference

HTML anchor element: the href attribute

→

WHATWG Spec

URL Living Standard

→

web.dev Article

HTML links and hypertext

→