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

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

The path in an `<area>` element's `href` can't contain a literal space, so write each space as `%20` or take it out of the URL.

An `<area>` defines one clickable region of an image map. The `<map>` element groups the areas under a `name`, and an `<img>` points to that map with `usemap="#name"`. An `<area>` with an `href` is a link, and the URL Standard doesn't allow spaces anywhere in a URL path. The usual cause is a page or file name with a space in it, like `/islands/north island`.

Browsers percent-encode the space before following the link, so the click usually still works. A crawler or a script that reads the raw value may not, and the markup is invalid either way.

Replace each space with `%20`. If you control the target URLs, hyphens (`north-island`) make cleaner addresses that need no encoding at all. A space after the `?` triggers a different message, `Illegal character in query`, and `%20` fixes that one too.

Every `<area>` with an `href` also needs an `alt` attribute. Screen readers announce it as the link text for that region, and the validator reports a missing one as a separate error.

## Invalid example

```html
<img src="islands.png" alt="Map of the islands" usemap="#islands" width="600" height="400">
<map name="islands">
  <area shape="rect" coords="20,40,180,160" href="/islands/north island" alt="North Island">
  <area shape="rect" coords="220,200,400,320" href="/islands/south island" alt="South Island">
</map>
```

## Valid example: spaces encoded as `%20`

```html
<img src="islands.png" alt="Map of the islands" usemap="#islands" width="600" height="400">
<map name="islands">
  <area shape="rect" coords="20,40,180,160" href="/islands/north%20island" alt="North Island">
  <area shape="rect" coords="220,200,400,320" href="/islands/south%20island" alt="South Island">
</map>
```

## Valid example: hyphens instead of spaces

```html
<img src="islands.png" alt="Map of the islands" usemap="#islands" width="600" height="400">
<map name="islands">
  <area shape="rect" coords="20,40,180,160" href="/islands/north-island" alt="North Island">
  <area shape="rect" coords="220,200,400,320" href="/islands/south-island" alt="South Island">
</map>
```