HTML Guides for space

A URL is made up of several parts: scheme, host (domain), path, query, and fragment. While some of these parts allow certain special characters (often percent-encoded), the host portion has strict rules. Domain names follow the DNS naming conventions, which only permit ASCII letters (a-z, A-Z), digits (0-9), hyphens (-), and dots (.) as label separators. Spaces are categorically forbidden.

This validation error typically occurs in two scenarios:

1. A literal space appears in the domain, e.g., http://my domain.com. This is often a typo or a copy-paste error.
2. A percent-encoded space (%20) appears in the domain, e.g., http://my%20domain.com. While %20 is valid in URL paths and query strings, it is not valid in the host portion. Percent-encoding does not make a space legal in a domain name — it still resolves to a space character, which DNS cannot handle.

Why this is a problem

• Broken links: Browsers cannot resolve a domain with spaces to an actual server. Users clicking the link will get an error or be taken nowhere.
• Accessibility: Screen readers and assistive technologies may announce the link, but users will encounter a dead end, creating a frustrating experience.
• Standards compliance: The WHATWG URL Standard explicitly forbids spaces in the host component. The W3C validator flags this to help you catch what is almost certainly a mistake.
• SEO impact: Search engine crawlers will treat the URL as invalid and will not follow or index it.

How to fix it

• Check for typos: The most common fix is to correct the domain to the actual, valid domain name you intended.
• Replace spaces with hyphens: If the intended domain genuinely has a word separator, the standard convention is to use hyphens (e.g., my-domain.com).
• Remove spaces entirely: Sometimes spaces are accidentally introduced and simply need to be removed (e.g., mydomain.com).
• Check the path vs. host: If the space belongs in a file path or query parameter rather than the domain, make sure it’s in the correct part of the URL and properly percent-encoded there.

Examples

❌ Literal space in the domain

<a href="http://my domain.com/page">Visit site</a>

❌ Percent-encoded space in the domain

<a href="http://my%20domain.com/page">Visit site</a>

✅ Fixed: use a hyphen in the domain

<a href="http://my-domain.com/page">Visit site</a>

✅ Fixed: remove the space entirely

<a href="http://mydomain.com/page">Visit site</a>

✅ Spaces are fine in the path (percent-encoded)

Note that %20 is valid in the path portion of a URL — just not in the domain:

<a href="http://mydomain.com/my%20page">Visit page</a>

Common mistake: space before or after the domain

Sometimes the space is hard to spot because it’s at the beginning or end of the URL, or between the scheme and domain:

<!-- ❌ Trailing space in domain -->

<a href="http://mydomain.com /page">Visit site</a>

<!-- ✅ Fixed -->

<a href="http://mydomain.com/page">Visit site</a>

If your URLs are generated dynamically (e.g., from a CMS or database), make sure to trim whitespace from the domain portion before constructing the full URL. A quick way to catch these issues during development is to validate your HTML regularly with the W3C Markup Validation Service.

The HTML specification requires that attributes on an element be separated by one or more ASCII whitespace characters. When you omit the space — typically between a closing quote of one attribute’s value and the name of the next attribute — the browser may struggle to determine where one attribute ends and the next begins. While some browsers may attempt to parse the element correctly, the behavior is not guaranteed and can lead to unexpected results.

This issue commonly occurs when editing HTML by hand, especially when copying and pasting attributes from different sources or when a template engine concatenates attribute strings without proper spacing. It can also happen when a closing quote is immediately followed by another attribute name, making the markup difficult to read and maintain.

Beyond validation, missing spaces between attributes hurt code readability. Other developers (or your future self) scanning the markup may misread attribute boundaries, leading to bugs that are hard to track down. Consistent spacing also ensures that assistive technologies and browser parsers interpret your elements exactly as intended.

How to Fix It

Go through your HTML and ensure every attribute is separated from adjacent attributes by at least one space character. Pay special attention to:

• Attributes placed immediately after a quoted value (e.g., "value"class should be "value" class).
• Attributes placed after unquoted values, which can be even more ambiguous.
• Dynamically generated markup from template engines or JavaScript, where concatenation might drop whitespace.

Examples

Incorrect: No Space Between Attributes

<a href="page.php"class="big">link</a>

Here, class is placed directly after the closing quote of the href value with no space in between. The validator will flag this as an error.

Correct: Space Between Attributes

<a href="page.php" class="big">link</a>

A single space between "page.php" and class resolves the issue.

Incorrect: Multiple Missing Spaces

<img src="photo.jpg"alt="A sunset"width="600"height="400">

All four attributes run together without any whitespace separating them.

Correct: All Attributes Properly Spaced

<img src="photo.jpg" alt="A sunset" width="600" height="400">

Correct: Using Line Breaks as Whitespace

When an element has many attributes, you can use newlines for separation, which also improves readability:

<img
  src="photo.jpg"
  alt="A sunset"
  width="600"
  height="400">

Newlines and indentation count as valid whitespace between attributes and are perfectly acceptable in HTML. This multi-line style is especially helpful for elements with numerous attributes, such as <input> fields in forms or components with data attributes.