HTML Guides for path segment

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>

The src attribute on a <script> element points to a URL whose path contains a character that is not allowed there unless it is percent-encoded.

A URL path may only use a restricted set of characters. Symbols such as ^, spaces, square brackets, and backticks have to be written in their percent-encoded form, so a caret becomes %5E. The validator names the exact character it rejected, so look at the path segment it points to and either encode that character or change the URL so it no longer appears.

A common source of the ^ character is a version range copied from a package manager. A specifier like @^2 belongs in a package.json file, not in a CDN URL. When you load a script straight from a CDN, pin an explicit version instead.

Invalid example

<script src="https://cdn.example.com/pkg@^2/dist/app.js"></script>

Valid example

<script src="https://cdn.example.com/pkg@2.1.0/dist/app.js"></script>