About This HTML Issue
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"classshould 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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.