HTML debugging tips
Here are some suggestions that may help you find problems in your Web pages, especially if you're writing your own HTML. (Also consult my online journalism course style guide.)
- Remember that most HTML tags are "containers" and should fit inside one another like nesting Russian dolls or a stack of Tupperware bowls. Sometimes missing a closing code has effects that seem unrelated -- a missing </title>, </head>, </a>, </table>, </body> or </html> ending code might cause part of a page to disappear -- or make all of the document appear in bold type.
Exceptions: The <br>, <hr>, <img src=picture.jpg> and (in most cases) <p> codes do not need to "close."
For codes that do both open and close, open and close them symmetrically:
YES: <a href="mypage.html"><i>some linked text I want to show in italics</i></a> (OK: italic codes contained within "a" anchor code)NO: <a href="mypage.html"> <i> some linked text I want to show in italics </a> </i> (Oops: anchor code closes before italic code, instead of containing it--this error would prevent the anchor link from functioning!)
- Combining codes that modify the appearance of type may create problems, especially heading or anchor codes. Notice that these codes already do several things to your text at once:
- Heading codes (<h2>, <h3>, etc.) automatically give a larger font size, make the text bold, and skip space before the start of the next paragraph.
- Anchor codes (<a href="etc.etc.etc.">) automatically underline text and turn it blue--or to whichever link text color is prescribed in the user's browser or in the page's body tag.
- Test all of your Web pages with both Netscape and Internet Explorer! The two browsers interpret some codes differently, especially codes that change font characteristics or text alignment. Don't struggle to make pages look identical in both browsers, but do make sure both versions are readable and that they function properly.
- Test your links to make sure they work after you put the page on your Web site! Type the page's full "http://pages.emerson.edu/students..." address into the browser when you do your checking.
I've already seen one Dreamweaver-created site this week with links to "file:///theirsite.com/theirpage.html" instead of "http://theirsite.com/theirpage.html"
The result: The browser looks for the document on the user's disk, not on the Web. Remember: A finished Web page should never have a link code that says "file://" This error is probably the result of not typing the "http://" when you inserted the address in Dreamweaver or some other page-creation program.
- As HTML evolved, its developers added new ways align text. Warning: Combinations of the old and new alignment codes sometimes are interpreted strangely by the Web browsers.
- OLD: The earliest text-alignment codes were the list codes (which provide indentation as well as bullets and numbers), the <center> tag, the <blockquote> tag, and the <img src align=direction > tag, which pushes text aside to make room for an inline image.
- NEW: Later additions include the <table> codes with alignment inside rows and cells, and the addition of align=direction as an option in the <p> tag or <div> tag. For example:
<p align=right>The End</p>.
If you use the open-and-close version of the <p> tag to position a paragraph, be sure to close the tag--and it's probably best to use the close code </p> on all paragraphs in that document.
- NEWEST: Cascading Style Sheets or "styles" and the relatively new "XML" language let you define your own codes. Microsoft Word, for example, uses some of these techniques when it exports HTML.
- Tables can break out of the measurements you've set for them, which can seem very mysterious. The cause is usually simple: If you put something IN a table cell that is wider or longer than the set measurement, most browsers push open that cell to hold the new object, then recompute the size of the other cells based on that one. So, if you put an 800-pixel-long piece of Christmas holly in the left half of an 600-pixel-wide table, you suddenly have a much bigger page. See these examples.
- Advanced techniques: We've barely mentioned image maps, Javascript, Cascading Style Sheets (CSS) and multimedia (Flash, Shockwave, etc.). If you have learned those techniques, you may use them -- but make sure the pages display correctly on either browser in our labs and still tell the essentials of the story to readers who do not use special browser plug-ins!
If you find any of these tips confusing (or wrong), or if you have additions to suggest, please send me a note!... Bob Last update: Dec .5, 2002