On Leading and Trailing Spaces in HTML Attribute Values

In most cases, you should not use a leading or trailing space in an HTML attribute value. For example, if you add a leading or trailing space to an ID attribute, you wouldn’t be able to hook into that value in CSS using the ID selector (not that you use IDs as selectors, right?):

<div id=" example"></div>

/* CSS won't apply */
#example {
  background: red;
}

See the Pen ID attribute with space breaks CSS by Louis Lazaris (@impressivewebs) on CodePen.

This happens because spaces are not allowed in an ID selector. But interestingly, there is a way around that using CSS’s attribute selector:

/* this works */
[id=' example'] {
  background: gold;
}

See the Pen Using a space in an ID attribute in a CSS selector by Louis Lazaris (@impressivewebs) on CodePen.

You get the same result with a trailing space, and you can even do something crazy like in the following example, and it will still work as long as you use the attribute selector:

<div id=" exa mp le"></div>

/* this works */
[id=' exa mp le'] {
  background: gold;
}

See the Pen Using multiple spaces in an ID attribute by Louis Lazaris (@impressivewebs) on CodePen.

Using JavaScript

Accessing the same element via the ID attribute in JavaScript will likewise fail unless you use a JavaScript technique that allows you to legally specify any of the spaces used in the value, as in the following example:

// this works
document.getElementById(' example').innerHTML = 'Example text.';

// this doesn't work
document.getElementById('example').innerHTML = 'Example text.';

// doesn't work with dot notation
window.example.innerHTML = 'Example text.';

As the first two examples in the above code demonstrate, the reference to the attribute should be a string so the space can be included. But as shown on the final line, using dot notation on the Window object (which is a way to access elements by their IDs), you wouldn’t be able to legally include the space character.

Another example of spaces in attributes being meaningful is when using the type attribute on input elements:

<!-- these will be regular text fields -->
<input type=" number ">
<input type="range ">
<input type=" button" value="Click Me">

See the Pen Using leading/trailing spaces on input[type] by Louis Lazaris (@impressivewebs) on CodePen.

As is the case with the ID attribute, the leading space in each of these type attributes is meaningful. So the above elements will not display as number, range, and button types, as specified, but rather as text inputs, which is the default for <input> when the type attribute is missing.

Spaces in Attributes that aren’t Meaningful

There are examples where not all the spaces in an attribute are meaningful, some for more obvious reasons than others. The class attribute, for example, is allowed to contain spaces, because, as the spec explains, it expects “a set of space-separated tokens representing the various classes that the element belongs to”. I’m sure most of you have taken advantage of that in your stylesheets.

In those cases, the leading and trailing spaces are not really meaningful and you’d get the same result with or without them. This means the following four lines of HTML are more or less equivalent for most purposes:

<div class="one two"></div>
<div class=" one two "></div>
<div class=" one two"></div>
<div class="one two "></div>

In the above code, the spaces that separate two or more classes are, for the most part, the only ones that matter. The leading and trailing spaces are more or less meaningless.

Similar to the examples above using IDs, an exception would be if you were using the attribute selector to access the class attribute, as shown in the following example code and demo:

<div class=" one two three "></div>

/* doesn't work */
[class='one'] {
  border: solid 1px red;
}

/* doesn't work */
[class='one two three'] {
  text-align: left;
}

/* this works */
[class=' one two three '] {
  background: gold;
  padding: 10px;
}

See the Pen Using attribute selector for class attribute with multiple classes by Louis Lazaris (@impressivewebs) on CodePen.

And, of course, any data-* attribute value can contain spaces that are meaningful (including leading and trailing spaces) so those spaces have to be reflected when accessing the element using that attribute value.

What About Leading and Trailing Spaces in href values?

The final thing I’ll mention here is that, technically, href attribute values (i.e. URLs) are allowed to have leading and/or trailing spaces. This is mentioned in the spec:

The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.

As far as I can tell, this is true for any element that uses href, including <link>. It also seems to be true for any HTML attribute that accepts a URL as a value (e.g. <script src>). So the following two <a> elements in the HTML below are, for all practical purposes, equivalent:

<a href="  https://www.impressivewebs.com  ">This link works</a>
<a href="https://www.impressivewebs.com">This link works</a>

And once again, in order to use attribute selectors (for example the starts-with attribute selector, which is common for links), you have to ensure the spaces are indicated, and the value is surrounded by quotes:

/* This will style only the first link */
[href^='  http'] {
  color: green;
  font-weight: bold;
}

/* This will style only the second link */
[href^=http] {
  color: hotpink;
  font-style: italic;
}

See the Pen Link href values with leading and trailing spaces by Louis Lazaris (@impressivewebs) on CodePen.

So although it is legal to include a trailing or leading space in an href value, I wouldn’t recommend it due to the fact that it breaks attribute selectors (and possibly some JavaScript) that use the start or end of the URL to determine styles or other functionality.