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

The href of this link contains a curly brace, usually from template syntax like {{ ... }} that reached the HTML without being replaced by a real URL.

Curly braces aren't allowed in URLs. When a placeholder such as {{ menu.link }} or {id} ends up in the page, the browser gets the placeholder text instead of an address. A value like {{ menu.link }}, with no scheme or leading slash, is a relative URL, so the brace counts as part of the path. That's why the validator mentions a path segment. A stray } in the path gets the same message with } in place of {. A brace in the query string or the fragment is reported with a different message.

Client-side frameworks often cause this. In AngularJS, href="{{ menu.link }}" puts the raw expression in the HTML, and anything that reads the page before the script runs sees it: the validator, a crawler, or a visitor whose JavaScript failed to load. AngularJS has the ng-href directive for this case. Write it as data-ng-href so the attribute is valid HTML, and AngularJS sets href once the expression has a value. Until then the link has no href and can't be reached with the keyboard, so rendering the final URL on the server is the more reliable fix.

If the braces are meant to be literal characters in the URL, percent-encode them: { as %7B and } as %7D.

Invalid example

<a href="{{ menu.link }}">Products</a>

Valid example

The server renders the final URL:

<a href="/products/">Products</a>

Valid example with AngularJS

<a data-ng-href="{{ menu.link }}">Products</a>

Learn more:

MDN Reference

MDN Web Docs: The Anchor element

→

MDN Reference

MDN Web Docs: Percent-encoding

→

docs.angularjs.org

AngularJS: ngHref

→