HTML Resources

Troubleshooting Your HTML Code

This is a checklist of guidelines for beginners for troubleshooting your html code.

  • Check the filename of your document
  • If your page will not open at all, perhaps there is something wrong with the filename.

  • Check the spelling of keywords and attributes
  • Perhaps you are just spelling a tag or attribute incorrectly, for example: <img scr="mydog.gif">. The correct attribute spelling is src.

  • Check the spacing between keywords and attributes
  • There should be a space separating keywords from attributes and a space separating attributes from values. There is no penalty for having more than one space character, but you need at least one.

  • Check the spelling of filenames and URLs in your href and
        src attributes
  • If an image is not appearing or a link not working, perhaps you spelled the filename or URL incorrectly. Remember, these are both case sensitive.

  • Check the location of images and links
  • If a page is not open, an image is not appearing, or a link not working and you know that you are spelling the filename correctly, perhaps the file is not located where you think it is located on the web or on your server.

  • Check relative pathnames in your href and src attributes
  • If an image is not appearing or a link not working and you know that you are spelling the filename correctly, perhaps the file is not located in the same folder as your web page. Make sure that you are building the correct relative path to the file.

  • Look for asymmetrical tags. For example:
    • <a href="text.html"><h1>My Speech</a></h1>

      is not as good as

      <a href="text.html"><h1>My Speech</h1></a>

      or

      <h1><a href="text.html">My Speech</a></h1>

  • Look for missing closing versions of tags.
  • Many tags have closing versions. You can easily lose track of whether or not a tag has been closed whenever you nest tags.

    The missing </a> tag will cause a problem:

      <a href="text.html"><h1>My Speech</h1>

  • Look for missing quotation marks in the values of attributes.
  • For example, this will most certainly cause an error:

      <a href="http://www.spawn.com>Spawn -- the comic book</a>
  • Make sure that you have only one set of these crucial tags
        in your page:
    • <html> ... </html>
      <head> ... </head>
      <title> ... </title>
      <body> ... </body>
  • Make sure that you have placed content and tags in the
        appropriate sections of the page.
  • e.g. content information never goes in the <head> section of the page; <title> ... </title> tags never go in the </body> section, etc..

  • Lookout for “Smart” ‘Quotes’.
  • Many word processors, Microsoft Word in particular, use “Smart” or curved quotation marks in place of straight single or double quotation marks, because they are easier on the eye. However, web browsers do not like these and other “special” characters. You know that this is the problem, when you are seeing this character - Ò - in the browser window.

    This generally happens whenever you cut and paste text directly from a word processor to a plain text editor. You can remove Smart Quotes by erasing them in your text editor and typing again, or by disabling smart quotes in the preferences for your text editor. You can also globally replace smart quotes, using the search and replace feature in modern text editors.

  • Keep an eye out for special characters and symbols.
  • Most special characters and symbols require that you type a special code in place of the character. For example, if you want to include a less than sign "<" in your text, this would confuse the browser, since these are the symbols use to insert html tags. It would then expect a keyword to follow it. So, to avoid this confusion, you would have to type &lt for the less than symbol and &gt; for the greater than symbol.

  • Zap gremlins or invisible characters (not so common)
  • Some word processors also have the ability to insert invisible formatting commands into text documents that have meaning for the word processor, but present nothing but confustion to the word processr. On a Mac for example, you can accidentally insert a command by catching the control, apple, or option keys when also typing another key. You can remove them with a modern text editor that will have an option in one of the pull-down menus to "remove hidden or invisible characters".