|
Beginner Tip:
Quotation Marks And Coding Errors
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Misplaced or mismatched quotation marks are one of the single most common coding errors in HTML. That simple mistake can break your page display because images and other page elements may not display correctly - if at all.
Optional - But Not Really - In HTML
An attribute is a characteristic of an HTML tag that appears within the opening part of the tag. You use attributes to define color, size, alternate text, etc. In the following example, the IMG tag has three attributes: height, width, and alt. Height and width tell the browser the image's size. The browser uses that information to display the page layout more quickly. ALT is a text description of the image that is used by people with text-only browsers or assistive technologies like screen readers:
<IMG src="../images/2Lions.jpg" height="128" width="82" alt="Photo of our 2 lions">
Now technically, you could quote every attribute like we did in this example, or you could save a few keystrokes and only quote the ALT tag. It's the only one that HTML 4 requires to be in quotes.
So this example is also correct:
<IMG src=../images/2Lions.jpg height=128 width=82 alt="Photo of our 2 lions">
There's nothing wrong with this code - except that it requires you to remember which attributes require quotation marks. It's a lot safer to get into the habit of quoting all attributes every time. You'll reduce the number of coding errors and debug time.
Common Errors With Quotes
If you've written your own HTML code or tried to modify editor-generated code, you've probably made at least one of these two common mistakes:
- Open quotes. If you leave a quote open, the browser doesn't understand where the attribute ends. Look at this sample table code. The problem line in is bold type. Note that the border attribute has a missing quotation mark.
<TABLE border="1 >
<TR>
<TD><IMG src="lions.jpg" height="128"
width="82" alt="2 lions"></TD>
<TD>Middle Column<TD>
<TD>Right Column</TD>
</TABLE>
See what it does to the table layout?
- Nested quotes. This most often happens when you're using quotation marks inside an ALT tag like this:
<IMG src"2Lions.jpg" height="128" width="82" alt="Our 2 "pet" lions!">
That's interpreted as: alt="Our 2" pet "lions!" Explorer 5.x and Netscape 6.x are pretty forgiving and display the image and alt tag, but older browsers may not show the image at all.
|
Use one of these options to nest quotes inside an ALT tag:
- A combination of single and double quotes: alt="Our 2 'pet' lions!"
- Escape the character with the numeric character &: alt="Our 2 &pet& lions!"
- Escape the character with the named character ": alt="Our 2 "pet" lions!"
|
Good HTML check and repair tools like HTML Toolbox will alert you to these types of errors and other coding problems that may break your pages.
Code For The Future
Most WYSIWYG editors are configured to automatically quote all attributes, but they do allow users to change the settings to use double quotes, single quotes, or none at all. If your editor isn't adding quotes to attributes, just check the documentation to find out how to modify the default settings.
You won't get errors by quoting attributes in cases where it's optional. You will get page errors if you neglect to quote required attributes. So why not just make a habit of enclosing all attributes in quotes? Then your HTML code will be in much better shape when you're ready to start hand-coding your pages or adding your own custom code to the editor-generated pages.
That saves you time and effort trying to locate HTML code errors. As an added benefit, you take a step towards getting your HTML code ready to convert to XHTML. The XHTML specifications require that all attributes be inside quotes. You'll save a lot of time in the future if you ever want to convert your HTML documents to XHTML.
|
