Thoughts on Indenting of HTML

The Problem

If you do a lot of HTML code-writing, you get to realize the importance of indenting so you can keep track of how deep you are in nested tags, so you can close everything back up properly near the end of your document/output.

Sometimes you'll find yourself 2 or 3 tables deep, each table having 3 levels of tags, as in:

<table>
    <tr>
        <td>
            ...another table...
        </td>
    </tr>
</table>

However, it can be very difficult to maintain proper nesting with the "pre" tag. Consider this example:

<table style="border: 4px dashed red">
    <tr>
        <td>
            <pre>
                Some output here.
                Watch out for me.
            </pre>
        </td>
    </tr>
</table>

On most web browsers this would appear as follows:

                Some output here.
                Watch out for me.
            

What's all that whitespace doing in the left-hand inside part of the red box? That's from the <pre> tag, of course! You asked for pre-formatted text. The browser took you literally, and displayed all those space and tab characters as-is!

If you get rid of that whitespace, just for the text between pre tags, it will look more normal:

<table style="border: 4px dashed red">
    <tr>
        <td>
            <pre>
Some output here.
Watch out for me.
            </pre>
        </td>
    </tr>
</table>

This should look like:

Some output here.
Watch out for me.
            

That's much better.

Next, we have the extra space in the bottom of the red box; where's that coming from?

Think about the last line of text just before the </pre> tag. The end of line (newline character) is within the <pre>..</pre>, so it counts as literal text that needs to be printed as-is! Let's fix that:

<table style="border: 4px dashed red">
    <tr>
        <td>
            <pre>
Some output here.
Watch out for me.</pre>
        </td>
    </tr>
</table>

This now looks like:

Some output here.
Watch out for me.

Hmm, that helped somewhat, but there's still more room in the bottom of the red box. It turns out this space is coming from the default settings of paragraph and preformatted text. By default, you get some vertical room ("margin") below the contents of these tags. Luckily that can be changed.

If you commonly use "align" and "valign" elements, you might like to hear about a way you can have greater control over margins and borders of your text using Styles.

It turns out the remaining space in the red box is coming from the bottom margin of the PRE tag. Luckily we can change it.

<table style="border: 4px dashed red">
    <tr>
        <td>
            <pre style="margin: 0px">
Some output here.
Watch out for me.</pre>
        </td>
    </tr>
</table>

This now looks like:

Some output here.
Watch out for me.

Voila! Just what we wanted.

PHP, Javascript

Sometimes you use other languages to generate your HTML dynamically, such as Javascript. This can make indenting harder, because now you're trying to indent your Javascript properly and output properly indented HTML to the browser, at the same time! A more extreme example is having PHP (or Perl CGI) outputting Javascript, which is outputting HTML. That gets really complicated.

In these situations it's best to just format the outermost language 100% correctly (PHP/Perl), and not worry so much about the inner ones. Now if you "view source" in your browser, it's going to be hard to follow the code for debugging. You can always use a code beautifier utility to format your generated Javascript or HTML properly, to help you during debugging.

Web browsers don't really care about indenting. In fact, you could have all the HTML on one big long gigantic line, for all the browser cares! If you "view source" on some major web sites out there, you might see this behavior. You should still try to properly indent your HTML whenever possible. Take pride in the code you generate, it will make your life easier when you have to find bugs later on.

Notes

As far as I know, the <pre> tag is the only one where text indenting affects output. <pre> is excellent for expressing sections of code and text output examples as-is, without you having to doctor up the source code you're displaying to "look proper" in HTML.

The <pre> tag normally uses a mono-spaced font (such as Courier), so vertical spacing of things lines up properly just as it would in a plain text window (a cmd window or Xterm).

Don't miss the latest web tips and tricks!
Subscribe to our low-volume mailing list:

Privacy Policy

See other tricks:  Web | Unix | Perl | SQL | General