0

Why are these two blocks of code being rendered different?

<button>text1</button>
<button>text2</button>

vs

<button>text1</button><button>text2</button>

Editted for clarification:

We can see in this Fiddle:

  • writting controls in diferent lines adds a white space between them (this space cannot be reached by console inspection, but can clearly be seen)
  • writting controls in the same line doesn't.
andy-lane
  • 7
  • 2
  • 6
  • HTML is whitespace agnostic. There is absolutely no reason it would render those two differently. All the rendering engines care about is the hierarchy of the tags, which is used to construct the content tree. HTML parsing doesn't happen in a regular top to bottom fashion. It's a re-entrant algorithm. Any thing position wise will be handled by CSS or implicity the default styling of the elements. The full parsing algorithm specification is available here: https://html.spec.whatwg.org/multipage/parsing.html – sinanspd Mar 31 '20 at 22:51
  • @sinanspd That's ok. But please check the fiddle and see how those blocks rendering are different. – andy-lane Mar 31 '20 at 22:57
  • Please see here: https://stackoverflow.com/questions/24615355/browser-white-space-rendering – sinanspd Mar 31 '20 at 22:59
  • Thanks @sinanspd. But i think that question is different from mine. I eddited the question for clarification. – andy-lane Mar 31 '20 at 23:50

2 Answers2

0

The "EOL" in HTML you have to tell it, try put <br> between buttons.

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>Case 1</h1>
    <button>text1</button>
    <br>
    <button>text2</button>


    <h1>Case 2</h1>
    <button>text1</button>
    <br>
    <button>text2</button>

  </body>
</html>
Neal
  • 3,119
  • 4
  • 27
  • 32
Wolfdale
  • 1
  • 1
  • Ok, but i'm no talking about **html line break**. My point is why those two blocks render different when assuming HTML is whitespace agnostic. – andy-lane Mar 31 '20 at 23:01
  • `` is invalid. There is no such thing. It's `
    `     – Rob Apr 01 '20 at 00:22
0

It's because the browser has no concept of linebreaks or tabs outside of special situations like the <pre> tag so wherever it finds them it converts them to whitespace. Keep in mind it will ignore all whitespaces, line breaks and tabs except the first one. You could have 30 consecutive line breaks and 100 spaces in your code, but it will render as 1 space in the browser.

Even code that only has a line break but no spaces or indents will still show a space when rendered.

An example: code with a line break but no space:

    <button>text1</button>
<button>text2</button>

It will still render 1 whitespace character between them because of the line break. You can verify this in the fiddle.

Typically any sort of formatting like this is handled by CSS.

MDN's explanation is about as good as any. The actual spec.

codebeard
  • 81
  • 7
  • You are right, it works as you mention. Have you read it in any official documentation? If you can mention it, this answer is the one. Thanks!! – andy-lane Apr 01 '20 at 02:26
  • Good point, I updated my answer. I think because I learned this the hard way by trial and error long, long ago it didn't occur to me to link to a reference. – codebeard Apr 05 '20 at 06:59