When does white space matter in HTML? (2016) (opens in new tab)

(medium.com)

61 pointsbradyholt7y ago10 comments

10 comments

lolc7y ago

Funnny how I hesitated clicking the link because part of my brain insisted that whitespace in HTML was "boring". Not worth of consideration. I'm glad I did click in the end becaus this article summarily answered a host of questions I'd collected over the years. I have a much clearer model now.

CM307y ago

Who actually thought rendering the white space between inline-block elements was a good idea in the first place?

Seriously, I genuinely cannot see a use case where this setup would make things better, and it's quite clear that in 95% of them it just makes things harder for web developers. Pretty much no one uses this to align anything, and any use cases I can see could be done better with margins.

Just ignore the spaces between inline-block elements and instruct browsers to strip them out.

robin_reala7y ago

They’re elements that appear as inline to their surroundings, and blocks to their contents. In what way wouldn’t you want it to render white space in the same way as other inline elements?

If you’re misusing inline-block for generic layout then you really should be looking at Flexbox and not trying to neuter the intended behaviour.

paulddraper7y ago

Putting yourself in the driver's seat decades ago, how should these render? What content should the browser put on the clipboard? How should text selection work?

    <s>See</s> <s>Spot</s> <s>run.</s>
    <s>See</s> Spot <s>run.</s>

Given that HTML is a text markup language, it made sense for text (including whitespace) to be significant, and the SGML to be minimally disruptive. 10% tags 90% text.

Now, in 2018 we want to develop applications not documents, and our HTML is now 90% tags 10% text.

In retrospect, inline should do what inline-block does now. And flexbox should have been used instead of many table/inline-block/float hacks. CSS is a mess: 20/100 foresight and 20/20 hindsight.

foolip7y ago

It doesn't matter, but couldn't help but notice that the honorable form feed (U+000C) was missing from the definition given. https://infra.spec.whatwg.org/#ascii-whitespace is the concept used in the HTML parser. (https://html.spec.whatwg.org/multipage/parsing.html)

z3t47y ago

I just hate when the web browsers renders differently depending on if you have a line break between certain elements. Line breaks in HTML source code should not matter!

8xde0wcNwpslOw7y ago

>Line breaks in HTML source code should not matter!

So, should you put spaces at the end, or at the beginning of lines in text that's broken into multiple lines?

1 more reply

ldjb7y ago

But what if you want to use elements like <pre> or <textarea>? How would you put in a line break on the rendered page? I suppose there's an argument to be made for not rendering line breaks as a space, but such a change to the HTML spec at this stage is probably not going to happen.

Theodores7y ago

As of 2018 there is no neat helpful way of resolving white space problems that I know of in Chrome devtools. I wish there was as I can remember trying to get the white space removed from a search box and the search submit button, almost getting into the realms of hacky negative margin things before the penny dropped that it was the white space problem that I had known since the IE6 days.

If using code to generate HTML then you can remove white space with Google's mod_pagespeed. This will only remove a certain amount and what remains either 'doesn't matter' or is something that needs fixing in templates.

I doubt there is a performance penalty for excessive white space but it is satisfying to be able to 'view source' for the document to be pretty printed with the exception of indentation. In my opinion source documents should be neat, otherwise might aw well just give up on HTML and go for some byte code HEX digit stream in a non-human-readable format.

hsivonen7y ago

Also fun: whitespace after </body>

j / k navigate · click thread line to collapse