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

The href value on the <a> element contains a literal | (pipe) character, which is not allowed in a URL path.

The URL standard doesn't list | among the characters a URL can contain, so a pipe in the path has to be written as %7C. Browsers still follow the link, but the markup is invalid.

This usually comes from a CMS or template that builds the path from a page title. A title like "Summer concert | Tickets" uses the pipe as a separator. If the slug function only lowercases the text and turns spaces into hyphens, the | stays and the path ends up as summer-concert-|-tickets. Fix the slug function so it drops anything other than letters, digits and hyphens. The new slug gives the page a new address, so redirect the old URL to it. If the URLs can't change, write the pipe as %7C in the href instead.

When the href is very long, the validator leaves the value out of the message. The cause and the fix are the same.

Invalid example

<a href="/events/42/summer-concert-|-tickets">Summer concert | Tickets</a>

Valid example

Remove the pipe from the slug:

<a href="/events/42/summer-concert-tickets">Summer concert | Tickets</a>

If the URL has to stay the same, percent-encode the pipe:

<a href="/events/42/summer-concert-%7C-tickets">Summer concert | Tickets</a>

Learn more:

MDN Reference

MDN Web Docs: The Anchor element

→

MDN Reference

MDN Web Docs: Percent-encoding

→

WHATWG Spec

WHATWG URL Living Standard

→