Easily Find and Correct Errors In Your xHTML

Before putting any xHTML or CSS file online, you should always check it for errors. A good way to do this is to run your code through w3c’s Markup Validator and CSS Validator.

As good as these and similar services are, I have found that some beginners have trouble understanding what the errors mean and how to fix them. With this in mind, I decided to do a segment on both of w3c’s validators.

xHTML Validation

w3c’s Markup Validator handles validation of HTML, xHTML, SMIL, MathML, and other markup languages, but all we’re concerned with here is xHTML.

If you look at the tabs at that site, you’ll see that the first tab allows you to check a page that’s already online by pasting its URL into the box. With the 2nd tab, it will allow you to upload a page that’s saved on your computer. The third option is to copy and paste the entire code of the web page into their validator and to validate it that way.

To see if this page validates, click here: Validate this page.

Unless someone manages to put invalid xHTML into their comments at the end of this post, you should see the message: “This document was successfully checked as XHTML 1.0 Transitional!”

Now let’s try the direct input validation method. If you took my beginner’s tutorials and have practice1.htm on your computer, you can copy the code from that page and paste it in there. If not, you may copy, paste, and validate this instead:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<title>Practice page</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/style.css" />
<link rel="stylesheet" type="text/css" media="print" href="styles/print.css" />
<div id="container">
<div id="header">
<h1>Practice page</h1>
<p class="intro">This is a simple practice page to practice writing xHTML and CSS. I intentionally created a problem on this page as your first test.</p>
</div><!-- end header -->
<div id="content">
<p class="second">Let's stick a <a href="http://ifyoucodeittheywill.com">link</a> here, some <em>emphasized text</em> and some <strong>strongly emphasized text</strong>.</p>
<p>Here, let's add an image <img src="images/smile.gif" alt="smile" />, an image link <a href="http://ifyoucodeittheywill.com"><img src="images/smile.gif" alt="smile" /></a> (there will be a square around it until we get into the CSS), and <a href="http://runboard.com">another text link</a>. Yes, I'm sticking this link in here for a man who has done more for me than he realizes, and I would like to return the favor.</p>
<h2>Another level-2 Heading</h2>
<h3>A Level-3 heading</h3>
<p>Phasellus pretium, massa sit amet eleifend eleifend, sem sapien congue turpis, pulvinar commodo ligula ipsum eu arcu. Pellentesque facilisis quam laoreet purus congue adipiscing. Sed facilisis ullamcorper diam. In tellus nulla, viverra eget, consequat vitae, rhoncus semper, ante. Praesent vestibulum ligula id justo. Nam eu magna. Curabitur vel diam in nunc rhoncus porttitor. Integer facilisis, ligula non semper dapibus, est dolor molestie urna, non cursus nisl diam sed metus. Etiam interdum leo ut eros condimentum bibendum. Phasellus leo. Aenean facilisis.</p>
<h3>Another level-3 heading</h3>
<p>Fusce ullamcorper mauris nec nulla. Curabitur dui. Morbi posuere lacus nec nibh. Pellentesque congue, enim condimentum tristique scelerisque, metus dolor ullamcorper nisi, vitae mattis justo turpis sed mi. Suspendisse erat mi, varius a, laoreet at, consectetur vitae, lectus. Aenean a lacus ac sapien venenatis eleifend. Cras interdum urna quis dolor. Nunc consequat mauris sed nulla. Phasellus eu sapien. Nunc aliquet est ut est. Nunc ipsum tortor, ullamcorper eu, tincidunt at, gravida non, metus.</p>
<h2>Another level-2 heading</h2>
<p>Proin tincidunt, lorem nec varius lacinia, odio nisi eleifend nibh, ac vulputate leo orci vel orci. In adipiscing bibendum justo. Praesent non quam eu sem sagittis facilisis. Pellentesque libero tortor, tincidunt eget, tristique in, viverra vitae, sapien. Praesent porttitor pulvinar ante. Sed nulla dolor, condimentum at, tempor eget, vulputate vitae, lacus. Donec ac felis. Nulla imperdiet urna non odio. Cras interdum odio vel quam. Aliquam erat volutpat. In et ante ut elit dapibus congue. Fusce non lectus. Curabitur interdum neque eu tellus. Morbi sit amet nisi lobortis lacus venenatis sodales. Nulla vitae neque sed libero dignissim bibendum. Vestibulum id augue non tortor auctor gravida. Sed congue est sed dolor.</p>
</div><!-- end content -->
<div id="links">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Community</a></li>
<li class="last"><a href="#">Contact</a></li>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Community</a></li>
<li class="last"><a href="#">Contact</a></li>
</div><br id="links-br" /><!-- end links -->
</div><!-- end container -->

It passes as XHTML 1.0 Strict, but with one warning. The validator doesn’t know what type of encoding we’re using, so assumes that it’s utf-8. If your website’s host is configured to automatically encode pages as utf-8, then you’re all set. Chances are it does, but if you’re not sure, upload the page to your website, then use the “Validate by URI” method.

I uploaded a file with the exact same xHTML that I posted above. Copy this link by right-clicking on it and “Copy Link Location” or “Copy Shortcut”, then paste it into the “Address” field of w3c’s Markup Validator (Validate by URI method). Now you’ll see that it validates without the warning, because my host has it set to encode pages as utf-8 automatically.

Now let’s see what happens if we make an error in the code. I removed the first </p> from that page and it resulted in 5 reported errors, but the first one is the one we need to focus on:

Line 19, Column 6: end tag for “p” omitted, but OMITTAG NO was specified

</div><– end header –>

The code it shows you only confuses matters, but look at what it says in bold.
A </p> is missing.

Now let’s fix that error and re-validate. All 5 errors have disappeared.

Now let’s create a different error. Where it says <h1>Practice page</h1>, let’s change that </h1> to a </h2>.

This creates 4 reported errors, the first of which is:

Line 15, Column 22: end tag for element “h2” which is not open

<h1>Practice page</h2>

This time the error message and code both make sense. The error message says that </h2> shouldn’t be there, and then when you look at the code, you can see the mismatch between <h1> and </h2>.

As you can see from these two examples, one small real error can easily cause 4 or 5 reported errors. So, when it comes to validating your xHTML, just look at the first error, fix that, then revalidate your code to see if any of the other errors given still apply.

Now, let’s move on to CSS validation.