CODEWITHSUNDEEP
htmlcross-browserwhitespaceminifyspecifications
Fred Gandt
Fred Gandt

Reputation: 4312

HTML Minification: Whitespace between element attributes

I'd like to remove more unnecessary bytes from my output, and it seems it's acceptable (in practice) to strip what can add up to quite a lot of whitespace from HTML markup by omitting/collapsing the gaps between DOM element attributes.

Although I've tested and researched (a little in both cases), I'm wondering how safe it would be?

I tested in Chrome (43.0.2357.65 m), IE (11.0.9600.17801), FF (38.0.1) and Safari (5.1.7 (blah-di-blah)) and they didn't seem to mind, and couldn't find anything specific in The Specs about whitespace between attributes.

w3.org's Validator complains, which is a strong indication that this is not safe and shouldn't be expected to work, but (there's always a "but") it's possible the requirement for a space is only strict when no quotes are present (for obvious reasons).
Also (snippy but poignant): their SSL is "out of date" which doesn't inspire confidence in their opinion.

I noted also that someone's HTML compressor could (when enabled) strip quotes around attribute values where those values had no whitespace within them (e.g. id), which implies that at least most if not all HTML parsing is focussed on the text either side of the equals signs (except with booleans of course), and where quotes are in use, they'd be considered the prioritized delimiter.

So, would: 

<!DOCTYPE html><html><body>
<a href="http://example.org"target="_blank"title="This is a test">Yabba Dabba Doo!</a>
</body></html>

▲ that ever go wrong, and if so, under which conditions?

What other reasons could there be to maintain this whitespace in production output (code "readability" is a non issue in this case)?

Update (since finding an answer):

Although I basically answered my own question insofar that there is a specification governing whether there should be a space between attributes, I still wonder if omitting them when using quoted values can be considered practically safe, and would appreciate feedback on this point.

Considering how often spaces may be omitted by accident in production HTML, and that the browsers I tested don't seem to mind when they are, I assume it would be very rare if ever that a browser failed to handle documents with these spaces omitted.

Although it's sensible to follow the specs in pretty much all situations, might this be one time cheating a bit could be acceptable?

After all - if we can magically save several hundred bytes without affecting the quality of the output, why not?

Upvotes: 3

Views: 523

Answers (2)

Dave Brown
Dave Brown

Reputation: 939

You could try online HTML minifiers like http://www.whak.ca/minify/HTML.htm or http://www.scriptcompress.com/minify-HTML.htm (search google for more) and find little things they change for hints to what can be taken out yet still render the HTML code.

On the first link your code:

<!DOCTYPE html><html><body> <a href="http://example.org"target="_blank"title="This is a test">Yabba Dabba Doo!</a> </body></html>

Turns into:

<!DOCTYPE html><html><body><a href=http://example.org target=_blank title="This is a test">Yabba Dabba Doo!</a>

saving you 18 bytes already...

Upvotes: 0

Fred Gandt
Fred Gandt

Reputation: 4312

There is a specification (after all)

It turns out I should have looked harder. My bad.

According to these specs:

If an attribute using the empty attribute syntax is to be followed by another attribute, then there must be a space character separating the two.

and

If an attribute using the unquoted attribute syntax is to be followed by another attribute or by the optional U+002F SOLIDUS character (/) allowed in step 6 of the start tag syntax above, then there must be a space character separating the two.

and

If an attribute using the single-quoted attribute syntax is to be followed by another attribute, then there must be a space character separating the two.

and

If an attribute using the double-quoted attribute syntax is to be followed by another attribute, then there must be a space character separating the two.

Which unless I am mistaken (again), means there must always be spaces between attributes.

Upvotes: 1

Related Questions