HTML Basics
Stanford University Libraries & Academic Information Resources

Whitespace

With only a few exceptions, HTML treats whitespace characters (spaces, tabs, and newlines) differently from ordinary characters. In general, a single whitespace character--including newlines--or a sequence of whitespace characters are treated as a single space and leading/trailing whitespace is eliminated. This is known as 'collapsing whitespace'. Therefore the following two paragraphs are treated as if they were identical

                                       <p>

Now is the
    time
       for


        all
                        good
        birds           to
        to fly the edge of the world and take a look over the edge

    </p>

<p>
Now is the time for all good birds
to to fly the edge of the world
and take a look over the edge
</p>

They are rendered, respectively

Now is the time for all good birds to to fly the edge of the world and take a look over the edge

Now is the time for all good birds to to fly the edge of the world and take a look over the edge

Most of the time whitespace isn't important to the author, and this markup behavior gives the author considerable flexibility. It makes markup simpler to write and, if used effectively, easier to read as well. For example, you can leave a blank space between paragraphs and around headings or, if you like indent the text marked by subheadings to make it clear how (to you, the reader doesn't see the source document unless he/she makes a special effort to read it) the document is structured, eg:

    <h2>How to do things good</h2>

    <p>I like to do things this way</p>

        <h3>How other people do things</h3>

        <p>Other people do things differently</p>

    <h2>How to do things better</h2>

    <p>Do things some other way, and if it's not better, repeat

The rules also permit--but certainly do not require--you to place tags on a line by themselves if you like, and to start every element on it its own line. For example

<p>Para 1</p><p>Para 2</p><address>Address 1</address>

is identical to

    <p>
    Para 1
    </p>

    <p>
    Para 2
    </p>

    <address>
    Address 1
    </address>

How to retain whitespace characters

However, there are obviously times when whitespace is significant and must be preserved. Verse, columnar material, examples (as seen in this document), and many other types of text require that whitespace be honoured. For these uses HTML provides the Preformatted Text (<pre> element), in which all spaces, tabs and newlines are preserved. In order to display a <pre> in a reasonable fashion, the browser will choose a non-proportional (i.e. typewrite style) font.

In cases where you need to make sure that a line break occurs at a particular place in an element that otherwise would collapse all the whitespace, HTML provides the line break (<br>) element.

Tabs

Tabs should be avoided in HTML documents because their handling by browsers is not consistent, and the output may not have much similarity to what you intended. Normally they will be expanded to a series of spaces, but the number is determined by a formula, and probably isn't what you indended.