Conquering Site Validation Errors

Validating your web pages is an important part of designing and developing your website design and layout. However, there is a lot of confusion for new users on what all those validation errors mean and what you need to know when working on your website design and layout and WordPress Theme.

Begin your web page design efforts by understanding how the various code tags work, and have a good understanding of HMTL structure and CSS presentation codes. Let’s look at a few of the most commonly overlooked and often misunderstood basic compliance issues.

Accurate and Complete Code

In order for your pages to meet the W3 Organization standards, the coding must be accurate and complete. All code must begin and end with the proper code (tag). This means that for every <p> there needs to be a </p> closing tag. Designers used to be able to get away without the closing code on a few tags, but with the stricter XHMTL and XML standards, you have to cross every “t” and dot every “i”.

Codes must follow a specific sequence and the tags must be nested appropriately. The last tag to open must be the first tag to close. For example, if you have a paragraph that starts with a phrase in bold, the wrong tag sequence would be:

<b><p>Text in bold:</b> More text rattles on here.</p>

The proper sequence should be:

<p><b>Text in bold:</b> More text rattles on here.</p>

Even if you are not ready to move into XML, prepare yourself for the future now by making sure that every attribute is in quotes and every open tag is closed. For example, we used to be able to get away with:

<img src="ball.gif" width=100 height=300 alt="Picture of a pink ball.">

Not any more. Every attribute used within a tag code must have quotes around it, so the proper way to code this is:

<img src="ball.gif" width="100" height="300" alt="Picture of a pink ball." />

We also used to be able to get away with leaving closing tags out like in this example of a list:

<ul>
<li>Item One
<li>Item Two
<li>Item Three
</ul>

Not anymore. For every opening tag, there must be an ending or closing tag:

<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>

Presentation verses Structure

One of the biggest challenges facing novice web page designers is the concept of the separation of the structure architecture of the web page from the presentation style. The structure of a web page is held within the HTML (Hyper Text Markup Language) tags on a page. The style and beauty of a web page is attached to each HTML page in the form of a Cascading Style Sheet (CSS) page. This page instructs the HTML page on how each element should look. For example, if you would like your header tag h1 to be in the font Arial and to be bold, dark blue(Hex Color code #333399), and about 120% larger than your text font, the old style of including presentation style with HTML would look like this:

<h1 align="center"><B><font size="2" font face="helvetica, arial, verdana, sans-serif" color="#333399">Title Here</h1>

You can remove all those codes from your HTML page and just leave:

<h1>Title Here</h1>

In the CSS page, most commonly called the style sheet, there would be a presentation code that would instruct the browser to display the h1 as “Arial, bold, navy (#333399), and 120% larger” and might look like this:

h1 {
font-family:helvetica, arial, verdana, sans-serif;
font-size: 120%;
color: #333399;
font-weight: bold;
font-style: normal;
text-align: center}


The use of style sheets are very important within web page design. With one style sheet for your entire Website, you can maintain a consistent presentation throughout. It also makes changing the “look” of your site easy. If you would like to change your header H1 to the color red and make it italic, instead of changing it on every single one of your 400 pages, you would just change the style sheet in one spot and it would be changed throughout the entire site.

HTML Is Not XHTML

WordPress does not use HTML, though there are HTML tags in the template files. It is actually the next generation of HTML called XHTML. XHTML has a few new rules that changes the way you write some HTML tags. So consider it HTML plus.

Core HTML is exactly the same in HTML, the only difference is that all tags must be lower case. This means no more capital letters like H1. You must use h1.

All tags must be closed. This is a rule. While it is obvious that every <p> requires </p>, it also means that all tags that don’t have closing tags must still be closed. This includes line breaks, images, and horizontal lines. These are self-closing tags with a space and forward slash added to the end of the tag.

• NOT <br> but <br />
• NOT <hr> but <hr />
• NOT <img src="ball.gif" alt="ball"> but <img src="ball.gif" alt="ball" />

Closing Tags Not Found – The Battle of the Nested Lists

One of the most common errors found on WordPress sites when validating is due to lost opening and closing tags in the sidebar’s nested list. The sidebar nested list is found in many WordPress Themes, featuring lists inside of lists for Pages, categories, blogroll links, and other site navigation.

First, you need to understand that nested lists have a particular structure. When a new list opens, the closing tag for the list item doesn’t close until after the new list ends. Here is the right structure for a nested list.

<ul><!-- open whole list -->
<li>Title of Section One
     <ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Bananna</li>
     </ul>
</li><!-- closing list under section one -->
<li>Title of Section Two
     <ul>
      <li>Beef</li>
      <li>Chicken</li>
      <li>Fish</li>
     </ul>
</li><!-- closing list under section two -->
<li>Title of Section Three
     <ul>
      <li>Carrot</li>
      <li>Celery</li>
     </ul>
</li><!-- closing list under section three -->
</ul><!-- closing whole list -->

What happens when your sidebar area doesn’t validate is that one of the closing tags is usually missing. The trick is to track down which tag is missing. Luckily, the W3 Validator usually gives you the starting line number of open and unclosed list item to help track it down. Simply find the missing piece, and put it in its place.

Missing ALT and TITLE Attributes

You will often get an error that an image or link has a missing ALT or TITLE attribute. In order to meet accessibility standards, images and links should have titles and/or alternative descriptions. Links require titles and images require ALT and/or title descriptions.

<a href="link.php" title="Article about Validation Errors">link</a>
<img src="ball.gif" alt="bouncing red ball" title="red ball" />

An image doesn’t require the title attribute, but Firefox uses the title as the hover balloon text when you move your mouse over an image, and doesn’t use the alt attribute, so many people use both.

More Validation Errors

There are more common validation errors, but I ask you to help me add more to this list. Are there any errors you see when validating your web pages that you think should be on this list?

And here are more articles to help you learn more about validating your site.

• Validating the Code Behind the Page
• Meet Them – Benefits of Compliance with Web Standards
• My WordPress Theme is Broken
• Secrets of Successful Editing of WordPress Themes
• Designing a WordPress Theme – Building a Sandbox
• 10 Steps to Valid HTML

---

site search tags: blog administration, wordpress tips, wordpress themes, wordpress templates, website design, validation, errors, validate, website administration, web page design, wordpress help
© Reprinted with Permission