Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

How to Debug HTML

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 specification.

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.

Correct:

<img src="imagename.jpg" />

Error:

<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.

Correct:

<img src="imagename.jpg" />

Error:

<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.

Correct:

<blockquote>This is my text</blockquote>

Error:

<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>

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268