Search code examples
htmlwhitespacespacetrailing

Are leading and trailing whitespaces ignored in HTML?

html4 says this:

In order to avoid problems with SGML line break rules and inconsistencies among extant implementations, authors should not rely on user agents to render white space immediately after a start tag or immediately before an end tag. Thus, authors, and in particular authoring tools, should write:

<P>We offer free <A>technical support</A> for subscribers.</P>

and not:

<P>We offer free<A> technical support </A>for subscribers.</P>

and this:

SGML (see [ISO8879], section 7.6.1) specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.

The following two HTML examples must be rendered identically:

<P>Thomas is watching TV.</P>

<P>
Thomas is watching TV.
</P>

So must the following two examples:

<A>My favorite Website</A>

<A>
My favorite Website
</A>

So, one shouldn't rely on them being ignored or not. What about html5?

UPD Or let us put it this way: can I treat them as being ignored or sometimes they matter (manifest themselves in one way or another)? In which ways, if any?

UPD Um, should I have said I had refactoring in mind...? I'm trying to make templates a little more readable, that's what made me think about it.

Solution

  • Spaces are definitely not ignored in inline tags (i.e. <a>, <span>, <strong>, ...), for instance in this example,

    <p>We offer free <a>technical support</a> for subscribers.</p>
<p>We offer free<a> technical support </a>for subscribers.</p>

    if you set the CSS to something like this

    a { text-decoration: underline; }

    you can definitely see the difference.

    Sometimes line breaks can produce weird results in inline tags, for example if you write the code like this,

    <p>We offer free <a>
technical
support
</a> for subscribers.</p>

    it seems to ignore the first line break, but not the last.

    Here's a fiddle for both examples: http://jsfiddle.net/Niffler/fnnanru2/

    Within block tags (i.e. <p>, <h1>, <div>, ...) spaces as well as line breaks at the beginning or end of the tags should always be ignored (i.e. <p>test</p> should look the same as <p> test </p>).

    And as another user wrote in a comment, a line break will generally render the same as a space.

    Also, multiple spaces or line breaks or combinations thereof generally get summarized to one space.