How to Debug HTML
By Stephen Bucaro
This article is a preview of a section of a new eBook that I'm working on,
so when you see references to an eBook, that's what it's referring to.
As you're working your way though the examples in this eBook at some point you may
encounter an error. I can assure you that your error is not a complex computer
programming convolution. You simply made a typo.
As your web browser reads your html code and tries to follow your instruction to
lay out the webpage, it is extremely forgiving. But it can't read your mind, and as
a computer program it's designed to follow your instructions exactly and not do too
much thinking on its own. That's why you have to type everything according to the
The html specification is very strict about punctuation. Dots, commas, equal signs,
and quotation marks must be in the proper places. Not only that, but if you place
a double-quote on one side of a value, you must place a double-quote on the other
side. If you place a single-quote on one side of a value, you must place a single-quote
on the other side.
HTML is not so picky as to whether you use single-quotes or double-quotes, but they
must match in pairs. An example of this is shown below.
<img src="imagename.jpg" />
<img src='imagename.jpg" />
HTML usually just ignores spaces, which is good because it allows you to format
your code so that it's easy to understand. But sometimes if you put just one space
in the wrong place, and the browser gets all confused. An example of this is shown below.
<img src="imagename.jpg" />
<img src=" imagename.jpg" />
HTML is not so picky as to whether you use upper-case letters or lower-case letters
in your code, but they should match. An example of this is shown below.
<blockquote>This is my text</blockquote>
<blockquote>This is my text</BLOCKQUOTE>
Some browsers will ignore case and display your webpage just fine. Other browsers
are case-sensitive and will choke if the case of the opening and closing tag don't
match. Also, remember we are actually using XHTML here, and being a version of XML
it must follow XML's strict rules. So the case of the opening tag and the closing
tag must match.
Fixing html errors, or typos, is extremely easy. But sometimes FINDING typos can
be a bear. You need to go through your code, carefully focusing on each character,
until you find the typo. If you have only a small amount of code that's practical.
But if you have a lot of code, wouldn't it be nice if you narrow down the location
of the typo by commenting out some of the code and see what parts work?
Shown below is an example of how to comment out text or code so that the browser
can't see it.
<!-- the browser can't see this text -->
How can this be used for debugging code? Lets say you typed the html code shown below.
<p><img src="image1.jpg" /><br />
<img src='image2.jpg" /><br />
<img src="image3.jpg" /></p>