HTML Tip:
Extra Closing Tags Cause Layout Trouble

by Larisa Thomason,
Senior Web Analyst,
Keynote NetMechanic

If you're designing or maintaining a Web page that has an extremely tight layout, you know that every line and bit of white space counts. So it's aggravating when mystery white space appears on the page. You don't want it and can't get rid of it, but don't know how you got it.

It's often caused by a simple coding error: an extra closing tag inside a block-level element.

A Little Basic HTML

Before you can really understand that statement, let's review some basic HTML first.

Some HTML tags are empty tags and others are non-empty tags. Image (<IMG>) and line break (<BR>) tags are examples of empty tags because they don't need a closing tag. But the majority of page elements are non-empty and require opening and closing tags like this:

<p>Paragraph text</p>
<h1>Page title text</h1>
<b>bold text</b>

HTML tags are either inline or block-level. An inline tag gets displayed in the current line of text, while a block-level element begins a whole new line. Look at this example code:

<p>Some HTML tags are <b>inline</b> and others are <b>block-level</b></p>
<p>Example code:</p>

In the first paragraph, we used bold tags to format two terms and display them in bold. They display on the same line as the rest of the text in the sentence, so a bold tag (<b>) is an inline tag. However, when you start a new paragraph tag (<p>), the text inside the new paragraph displays on a new line, with space between it and the previous element. This illustrates that the paragraph tag is a block-level tag.

Other block-level tags include:

All three are non-empty, so they require a closing tag. The trouble starts when you leave extra closing tags extras inside your code.

Extra Closing Tags Equal Extra Space

Consider this snippet of HTML code:

<h2>Section header text</h2>
<p>Text here……</h2>More text here on the same line.</p>

Note the extra closing H2 tag in the middle of the paragraph.

You think the text will display like this:

Section header text

Text here……More text here on the same line.

But instead, you get this effect in Internet Explorer:

Section header text

Text here……
More text here on the same line.

That extra closing H2 tag adds a line break where you don't expect it and don't want it.

The amount of extra space added depends on the closing tag. An extra closing UL (unordered list) adds a lot more space than an extra closing DIV.

To see what we mean, open this example page in Internet Explorer. The example page displays side-by-side comparisons of valid code and code with extra closing tags.

An Explorer-specific Problem

After you've viewed the example page in Explorer, look at it in Netscape and Opera browsers. You may be surprised by the difference.

This is one of the few areas where browsers that claim to be strictly standards-compliant (NS 6.x and up and Opera) are actually more forgiving than Explorer! Both Netscape and Opera ignore the extra closing tags inside block-level elements, while Explorer looks at them and adds an extra line of space. (Since this is invalid HTML, the standards don't address how this should be handled. Different software developers chose different implementations.)

Always test your pages in a variety of browsers because browser display issues are a common problem for all Web designers. Manual testing takes time, but Browser Photo will give you actual screen shots of your page in 16 different browsers and operating system combinations in about 20 minutes.

That gives you extra time to debug the page!

Use An HTML Validator To Locate Extra Tags

How do you get this error in the first place?

It's pretty easy when you're hand coding, because you'll probably do a lot of cutting and pasting, as well as moving page elements around, until you decide on a final design.

But even a good HTML editor won't solve your problem. For instance, Macromedia HomeSite gives users an option called "Tag Completion." When a user enters the beginning tag of a non-empty page element, the editor automatically adds the closing tag. Other editors offer similar features.

However, there's no similar function to automatically delete a closing tag when the user deletes the opening tag. The closing header tag automatically appears when you enter an <H1>, but if you delete the opening tag later, the closing tag </H1> remains a part of the code until you delete it manually.

You can certainly scan the code yourself, looking for extra closing tags, but then you risk accidentally deleting tags you need and causing even more problems!

The safest alternative is to always use an HTML validation tool to scan your page and alert you to coding errors. NetMechanic's HTML Toolbox is one of the best because it contains many functions besides basic validation.

HTML Toolbox evaluates your code, highlights errors, alerts you to browser-specific code, broken links, and estimates page download time. The subscription version even corrects your code and gives you an alternate HTML file you can upload directly to your site!

An orphan closing tag may not seem like a big deal, but what if it breaks your careful layout? HTML validators are a great, time-saving way to find simple errors like this that cause display problems.