HTML Guides for path segment

The href of an <a> element has a literal space in its URL path, and the URL is too long for the validator to quote in the message.

A valid URL has no literal spaces. In the path (the part after the domain and before any ? or #), a space has to be percent-encoded as %20. Browsers encode the space themselves when someone follows the link, so the link often works, but the href is still not a valid URL.

The validator usually prints the bad value between Bad value and for attribute. When the value is 200 characters or longer, it leaves the value out, which is why this message has nothing between them. Values that long tend to come from file names written as whole sentences, or from a block of text pasted into a link field by mistake. To find the link, check the source line shown with the issue, or search the page source for href values that contain spaces.

The fix is the same as for a short URL: replace each space with %20. If you control the file, a short name with hyphens instead of spaces, such as annual-report.pdf, is easier to link to. If the href holds text that was never meant to be a URL, put the right address back in the link.

Invalid example

<a href="/downloads/reports/Annual report on community health programs and volunteer outreach in the northern region with survey results, budget breakdown and recommendations for the next two financial years.pdf">

Download the annual report

</a>

Valid example

<a href="/downloads/reports/Annual%20report%20on%20community%20health%20programs%20and%20volunteer%20outreach%20in%20the%20northern%20region%20with%20survey%20results,%20budget%20breakdown%20and%20recommendations%20for%20the%20next%20two%20financial%20years.pdf">

Download the annual report

</a>

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 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>

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>