When Does Whitespace Matter in HTML

Does indenting or white space matter in html?

Whitespace does make a difference in page rendering, howevera string of whitespaces longer than one will just be rendered as one whitespace, so this (line break)

<label class="field-row">                
   <span class="label-text" >Email</span>
   <input type="email" />
</label>

and this (no line break, but a whitespace between the span and input)

<label class="field-row">                
   <span class="label-text" >Email</span> <input type="email" />
</label>

will be rendered the same, while this (no whitespace)

<label class="field-row">                
   <span class="label-text" >Email</span><input type="email" />
</label>

will be rendered without that extra space in between the elements.

Does it ever matter , Whitespace between HTML elements?

Yes, for example: pretty much any time the data is inline.

Compare:

<p>H<b>e</b>llo, world</p>

and

<p>H <b>e</b> llo, world</p>

When does whitespace impact on performance?

Try this:

Do comments affect Perl performance?

Edit for comment.

Simple example using a hello world in Scheme with varying zillions of comment lines:

netbsd1# ls -l file* 
-rw-r--r--  1 root  wheel        1061 Mar 11 00:01 file.out
-rw-r--r--  1 root  wheel      102041 Mar 11 00:01 file1.out
-rw-r--r--  1 root  wheel    10200041 Mar 11 00:01 file2.out
-rw-r--r--  1 root  wheel  1020000041 Mar 11 00:03 file3.out
netbsd1# for i in file*
> do
> echo $i
> time ./scm $i
> done
file.out
hello world
    0.06s real     0.01s user     0.01s system
file1.out
hello world
    0.03s real     0.01s user     0.02s system
file2.out
hello world
    0.64s real     0.28s user     0.30s system
file3.out
hello world
   61.36s real    11.78s user    41.10s system
netbsd1# 

Clearly, the 1GB file had major impact which is not necessarily surprising considering I only have 512M of RAM on this box.

Also, this is interpreting/compile speed. If you actually compiled these files, the runtimes would all be identical. You can draw your own conclusions defining impact.

Browser white space rendering

Browsers only collapse consecutive regular space characters. Text rendering is mostly governed by the CSS spec rather than the HTML spec (with exceptions); with respect to whitespace collapsing, section 16.6.1 of CSS2.1 has the details. Specifically:

any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.

Since there's a non-breaking space separating every two space characters that would otherwise be consecutive (and non-breaking spaces are not considered "regular" space characters), the browser has no opportunity to collapse any of them, and so must render all of them in sequence.

The behavior across browsers is mostly identical, except for a nasty bug in Chrome regarding the part about "a space before the inline".

White space inside XML/HTML tags

The specification (section 3.1 Start-tags, end-tags, and empty-element tags) says that there is no white space between the '<' and the tag name, between '</' and the tag name, or inside '/>'. You can add white space after the tag name, though:

<foo            >
</foo        >
<bar
/>

Does it ever matter , Whitespace between HTML elements?

Yes, for example: pretty much any time the data is inline.

Compare:

<p>H<b>e</b>llo, world</p>

and

<p>H <b>e</b> llo, world</p>

---

Related Topics