HTML Tip:
Ten Easy Ways To Break Your Web Page

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Has your table content escaped and started floating randomly about the page? Did your page content disappear entirely? Does your MARQUEE not scroll? If you answered "yes" to any of these questions, you've already found at least one of the ten easy ways to break your Web page.

10. Leave an open space at the table.

Some HTML tags consist of the opening tag only (like META and BR). The TABLE tag is not one of them! Neither are its related tags, TR and TD. Tables display reliably across browsers only when all TABLE, TR, and TD tags are closed.

Why? Because Netscape won't display the table at all if the closing TABLE tag is missing. Explorer and Opera display the table as you probably intend, even though the page contains an HTML error.

Although technically the closing TD tag is optional, use it anyway. It helps the browser determine the layout in nested tables and gets your code more XHTML compliant.

NetMechanic's HTML Toolbox is an easy, timesaving way to find table open tags that cause errors like these.

9. Kick the INPUT out of the form.

Every input form needs a working SUBMIT button, but some SUBMIT buttons only seem to work.

That happens when you include the INPUT tag containing the SUBMIT button outside the closing FORM tag, like this:

<form>
form input elements here
</form>
<input type="button" name="submit" value="submit">

See how the button is outside the form? The SUBMIT button won't display in Netscape because that browser requires all input elements to be inside the opening and closing FORM tags. Explorer is even trickier: the button appears on the page and looks normal. But when visitors click on it, the form never submits.

You could be losing visitor comments - even online orders! - and never even realize it.

8. Give the table data a passport.

Ever had your table data and images start wandering around your Web page instead of staying put inside their individual table cells? Table data gets loose when you forget to enclose it inside TD tags.

The browser doesn't know where you want to display the data, so it sticks the information above the table instead of inside it.

Consider this code:

<table>
<tr>
<td>some content here</td>
<td>more content here</td>
really important image here!
</tr>
<tr>
<td>another line of content</td>
<td>more content</td>
</tr>
</table>

Note how the phrase "really important image here!" is outside the TD tags? Whether it's text or an image, all browsers display the content outside the table at the very top of the table.

7. Don't check your FrontPage.

Microsoft's software programs include several proprietary tags and functions that are only recognized by Microsoft software and utilities. This is a particular problem with online forms. FrontPage includes special tags called "webbots" that help you easily process forms without the bother of CGI scripts. However, they only work on servers that have FrontPage extensions installed so you have to be careful when changing Web hosts.

FrontPage also allows you to include proprietary HTML tags like MARQUEE, that only work properly in the Explorer browser. But just about any HTML editor gives you options to use other browser-specific tags on your pages.

Always let HTML Toolbox scan your page for proprietary tags and browser-specific code that may break your page.

6. Rely on complete browser support.

Other HTML tags are part of the HTML standard, but don't have wide browser support yet. Useful tags like TBODY, ACCESSKEY, and FIELDSET may display inconsistently across different browsers.

In most cases, these tags are added specifically to increase the usability and accessibility of the Web page. They don't break your page in any browser. Even so, avoid using them to convey critical information because some visitors won't be able to see it.

5. Let your fonts play hide and seek.

Think that every visitor will have exotic fonts like Mitzvah, PanRoman, and Simplex installed on their system? Oops, think again!

An unusual font may fit perfectly with the theme of your Web page, but if visitors don't have it installed on their individual systems, they'll see the browser's default font instead. Page content that looks great in Elephant may be much less compelling in Times New Roman.

Although you can use embedded fonts that download along with your Web page, that technique increases page download time and turns away careful visitors who may be wary of download anything (even a font set) from your Web site.

Check the CodeStyle.org site's Font Sampler before you select an unusual font for your site. The results of their online survey of installed fonts (broken out by operating system) may help you select the best fonts for your audience.

4. Leave the TITLE open.

A good TITLE succinctly describes the site's purpose to visitors. It's important for search engine optimization too, because most search engine algorithms analyze TITLE text for keywords, topic relevancy. A page's TITLE may even display as the site description on some search engine results pages.

Such a little, simple tag can still cause serious problems. A proper TITLE looks like this:

<head>
<title>Your page's title here</title>
</head>

When you forget the closing TITLE tag, Netscape and Explorer display a blank Web page. Opera displays the page, but places the TITLE text at the exact top of the Web page. That's probably not where you intended to put it!

3. Mix up the image names.

Attractive images can make - or break - a Web page, so make sure that visitors can see them!

Browsers are picky about file names and paths: everything must be in place, down to the capitalization of your file name for the browser to make the correct request and receive it from the server.

The image MyCat.jpg is not the same as myCat.jpg - unless you've actually saved the same image under two different names.

When you're adding images to your page, remember:

2. Put too many tags in the nest.

When you're using HTML to format text, it's easy to get the FONT, bold, italics, and other formatting options mixed up inside the code. Like when you format some text with FONT, then make it bold, and maybe underline it for special emphasis.

According to HTML rules, tags should be closed in the reverse order to how they were opened. Otherwise, Netscape browsers may try to close the tags for you - in the order the browser thinks they should have been closed.

The effect is hardly ever what you expect, so don't leave it to chance! Close your nested tags properly. Even better, avoid nesting formatting tags by using Cascading Style Sheets instead!

1. Flunk the browser test.

As you may have noticed, many of these mistakes look fine in one or more browsers, but don't work in others. That's because browsers follow different rules for page display and interpret W3C standards differently.

Let's consider the nature of the 3 major browsers: Explorer, Opera, and Netscape.

Think back to your childhood. Imagine Explorer as your sweet old grandmother who always overlooked your misdeeds and slipped you some cash when you blew your allowance on useless trinkets. Explorer may be forgiving, but Netscape and Opera are the strict teachers who circled the playground, ready to pounce on anyone who even thought about breaking a rule.

The sloppy coding and design mistakes that Explorer thoughtfully overlooks on your Web site will be instantly noticed and punished by Opera and Netscape. Yes, the majority of visitors probably use Explorer, but a substantial minority may also be browsing with Netscape 4.7, Netscape 6.x, Opera, WebTV, and other browsers. None is as forgiving as Explorer.

The only way to be sure that your page works across browsers is to test, test, test! NetMechanic's Browser Photo makes that easy by giving you quick access to actual screen shots of your page in 16 different browser and operating system combinations.

Yes, there are a lot of ways to break your Web page - a lot more than the ten we've shown you here. Fortunately, you can quickly find and fix most of them with HTML Toolbox and Browser Photo!

Learn even more about browser incompatibility problems with our online Browser Problem Tutorial.