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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-href-on-element-a-illegal-character-in-fragment-space-is-not-allowed
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The fragment portion of a URL (everything after the `#` symbol) follows the same encoding rules as the rest of the URL — literal space characters are not permitted. When a browser encounters a space in a URL fragment, it may try to correct it automatically, but this behavior is not guaranteed across all browsers and contexts. Relying on browser error-correction leads to fragile links that may break unpredictably.

This issue matters for several reasons. First, it produces invalid HTML that fails W3C validation. Second, fragment navigation (jumping to a specific section of a page) may not work correctly if the browser doesn't auto-correct the space. Third, assistive technologies like screen readers rely on well-formed URLs to announce link destinations accurately. Finally, tools that parse or process HTML programmatically — such as crawlers, link checkers, and content management systems — may misinterpret or reject malformed URLs.

The most common scenario for this error is linking to an `id` attribute on the same page or another page where the `id` contains spaces. However, it's worth noting that `id` values themselves cannot contain spaces in valid HTML (a space in an `id` would make it multiple invalid tokens). So if you're writing both the link and the target, the best fix is often to correct the `id` itself by using hyphens or underscores instead of spaces.

## How to Fix It

There are two main approaches:

1. **Percent-encode the spaces** — Replace each space with `%20` in the `href` value.
2. **Use space-free identifiers** — Change the target `id` to use hyphens or camelCase, then update the fragment to match.

The second approach is strongly preferred because it fixes the root problem and produces cleaner, more readable markup.

## Examples

### ❌ Invalid: Space in the fragment

```html
<a href="https://example.com/page#some term">Go to section</a>
```

```html
<a href="#my section">Jump to My Section</a>
```

### ✅ Fixed: Percent-encode the space

If you cannot control the target `id` (e.g., linking to an external page), percent-encode the space:

```html
<a href="https://example.com/page#some%20term">Go to section</a>
```

### ✅ Better fix: Use a hyphenated `id` and matching fragment

When you control both the link and the target, use a space-free `id`:

```html
<h2 id="my-section">My Section</h2>
<p>Some content here.</p>

<a href="#my-section">Jump to My Section</a>
```

### ❌ Invalid: Space in fragment linking to another page

```html
<a href="/docs/getting-started#quick start guide">Quick Start Guide</a>
```

### ✅ Fixed: Matching hyphenated `id`

```html
<!-- On the target page (/docs/getting-started): -->
<h2 id="quick-start-guide">Quick Start Guide</h2>

<!-- On the linking page: -->
<a href="/docs/getting-started#quick-start-guide">Quick Start Guide</a>
```

### A note on `id` naming conventions

Since fragment identifiers reference `id` attributes, adopting a consistent `id` naming convention avoids this issue entirely. Common patterns include:

```html
<!-- Hyphens (most common, used by many static site generators) -->
<section id="getting-started">

<!-- camelCase -->
<section id="gettingStarted">

<!-- Underscores -->
<section id="getting_started">
```

All three are valid and will never trigger a space-related validation error in your fragment links.