|
HTML Tip:
Spaces Around HREF Tags
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Have you ever noticed mysterious underline characters (underbars) scattered around on a Web page like freckles? You usually notice them adjacent to a linked image, but they've also been sighted next to text links as well. In this article, we'll track down the source of the mystery underbars and show you how to keep them off your pages.
Spaces Around Image Links
The answer is maddeningly simple but it can be almost impossible to find! The extra underline characters appear next to links when you accidentally insert extra spaces or carriage returns inside your HREF tags.
The problem occurs in both Netscape and Explorer. WebTV isn't affected because it displays links differently than the other browsers.
Look at the example below. For the sake of clarity, we left out the ALT and image size attributes:
Check your page for errors.
<a href="http://www.netmechanic.com/"> <img
src="html_help_bulb_no17.gif">
</a> NetMechanic can help!
|
Note the space between the opening HREF tag and the IMG tag and the carriage return between the end of the IMG tag and the closing anchor tag. Browsers display the code like this:
Check your page for errors. 
NetMechanic can help! |
The browser displays those small bars on either side of the picture because it interprets the HTML code to mean that the spaces between the IMG and HREF tags are part of the hyperlink.
Spaces Around Text Links
You can also create the same effect with text links.
Use<a href="http://www.netmechanic.com"> NetMechanic </a>tools
to find errors on your site!
|
That code gives you the following link:
In this case, the spaces between words are placed inside the HREF tag instead of outside. Again, the browser assumes that the spaces are an intentional extension of your link and highlights the space in the same color as the link text.
The right underbar display problem is the most common because the left underbar disappears if you place a space between the outside text and the beginning HREF tag. The right underbar stays as long as there's a space before the closing anchor tag.
Use <a href="http://www.netmechanic.com"> NetMechanic </a>
tools to find errors on your site!
|
HTML Toolbox Finds Other Problems
The mystery underbars often pop up on Web pages when you design the page, add the copy, the go back later to insert your hyperlinks. Fortunately, it's easy to see in a browser and simple to correct in your code.
Use NetMechanic's HTML Toolbox to find and repair other errors that are more difficult to handle. It will alert you to spelling errors, cross-browser compatibility problems, HTML errors, and more.
|
