|
HTML Tip:
Problems With Nested HTML Tags
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Have you ever had a Web page display perfectly in Explorer, but look awful in Netscape even though you avoided browser-specific techniques? The solution may be simpler than you think: check your HTML code for improperly nested tags.
Netscape versions 4.x and below enforce HTML coding standards more strictly than Explorer and Netscape 6.0. Their different interpretations can make problems hard to find.
Problems With Nested Tags
Nesting describes the structural relationship between tags in HTML code. When Tag A is nested inside Tag B, then Tag A should be opened and closed before Tag B is closed. Mixing up the tags can cause unpredictable results.
Let's look at a simple example first:
<b>This text is in bold for emphasis
<u>and this is underlined.</b>
This should be underlined, but not bold</u>.
|
Note that we closed the bold tag inside the underline tag. The designer may expect the browser to stop rendering the text in bold, but keep underlining. That doesn't always happen.
Netscape 4.x renders the text like this:
This text is in bold for emphasis and this is underlined. This should be underlined, but not bold.
While Explorer 5.0 and Netscape 6.0 interpret it this way:
This text is in bold for emphasis and this is underlined. This should be underlined, but not bold.
Netscape 4.x swaps the closing bold and underline tags. This closes the tags in the proper order according to HTML standards - but may cause unanticipated results.
Careful With Multiple Tags
This problem can get really confusing if you're dealing with several different tags and get them nested out of order. At that point, it's almost impossible to predict how browsers might render the page.
This code mixes two BOLD tags with two FONT tags:
<b>
<font face="arial">
<font color="red">
This text is in red for emphasis!
</font>
This text is still in bold type.
</b>
Now, this is supposed to be regular type, not
<b>bold</b>.
</font>
|
The main problem here is a simple error: the opening bold tag is misplaced in relation to the FONT tags.
Netscape 4.x gets completely confused and uses the first closing bold tag as a closing font tag - causing the font to abruptly change from Arial to Times Roman (or whatever font is the browser's default) and leaves the rest of the text still in bold type.
This text is in red for emphasis! This text is still in bold type.
Now, this is supposed to be in regular type, not bold.
Again, Netscape 4.x is enforcing the HTML rule that nested tags must be closed before their parent tags.
Explorer 5.0 and Netscape 6.0 display it like the designer probably intended and display all the text in Arial:
This text is in red for emphasis! This text is still in bold type.
Now, this is supposed to be in regular type, not bold.
While it may seem that Netscape 6.0 will solve your cross-browser problems, don't count on it anytime soon. Netscape just released 6.0 in November 2000 and most Internet users are notoriously slow to upgrade. Improperly nested tags will cause you and your visitors problems for a long time.
Use HTML Toolbox To Find Errors
These types of errors can drive even experienced Web developers crazy because they're not immediately obvious - especially if the code is dense or poorly organized. Save yourself time, effort, and frustration by checking your Web pages with NetMechanic's HTML Toolbox.
Toolbox will scan your pages and alert you to nesting errors and other coding problems and techniques that can affect your page display across browsers.
|
