Skip navigation

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.


site search tags: , , , , , , , , , ,
© Reprinted with Permission

12 Comments

  1. Posted October 7, 2005 at 12:49 pm | Permalink

    It’s too bad WPMU’s hashcash produces invalid code…and the default kses.php doesn’t allow <ul> or <ol> tags in posts, so that also produces invalid code. :(

    Finally got mu up and running, and fixed the htaccess errors that was making comments and uploads redirec…then I find those pesky validation errors. I need a vacation! :D

  2. Posted October 8, 2005 at 10:23 pm | Permalink

    The <ul> works but you’re right, the <ol> is stripped out from wordpress.com, which is stupid and painful.

    But it sounds like you have installed the full version of WordPressMU, so you have access to the kses.php file and you can add or remove whatever code stripping factors you want. Hopefully you will be much wiser than wordpress.com.

    But remember, WordPressMU is still in testing phases, and you get what you pay for and then you pay for what you get. ;-)

  3. Posted October 9, 2005 at 1:33 am | Permalink

    Heh…yeah, well…I still haven’t gotten an invite to wordpress.com, so I thought I’d try out MU anyway. ;)

  4. Posted December 9, 2005 at 1:45 pm | Permalink

    I think “title” atribute in img tag – it’s just more problems to web-developers, Firefox read like alt, IE read other – that’s not good. As it’s with all not-standartizated features.

  5. Posted September 30, 2006 at 1:24 am | Permalink

    hi lorelle,

    i wanted to dialogue with you about problems with validation. the trouble i was having the last 2 blogs (mentioned below) is that even though i could keep the sidebar, the header, footer etc, i was not able to get the whole site validation, as i could not find where the code lives, as I say in http://www.samdevol.com/wordpress-troubleshooting-i-have-to-validate-oh-my/. I cannot find my files to validate them. how do i get to the rest of the site, so i can validate it?

    Then WordPress Lorelle the beautiful clear one, came along and changed all that. everything she writes is so understandable …
    things that i have not understood for the last 3 years of using wordpress, are now crystal clear when explained by Lorelle. i asked her recently if she could please clone herself.

    alto

    [Edited]

  6. Posted September 30, 2006 at 8:31 am | Permalink

    Thanks for the nice words, Alto, though I edited out the rest of the comment for space. Too much information. ;-)

    Just to be clear for all, EVERY file in your WordPress Theme directory, found under /wp-content/theme/yourthemename makes up the modular file system to create the web pages on your WordPress blog. No where else. That is where you will find all the files.

    Tracking down where the error is in order to fix it is explained in Finding Your CSS Styles in WordPress, since that helps you track down where what is in your WordPress Theme template files in order to fix what is broke.

    Why Do You Comment in the Comments? explains why you should but comment code ( <--sidebar template --> ) inside of each of the template files in your WordPress Theme at the top. When you are digging through the generated web page code, it tells you which section you are “in” where the error is.

    Validating the Code Behind the Page is another article I wrote that will help you understand validation and how to fix the errors on your WordPress blog.

    I highly recommend to everyone that they start with a full validated WordPress Theme by someone else and learn how that works fully before tweaking, adding, or changing a Theme. This is not something you can really do casually. It is a new language with new rules, and some of those rules don’t make sense, even when you have been doing this for almost 15 years. Trust me.

    Good luck and thanks again for sharing, Alto.

  7. Posted September 30, 2006 at 6:59 pm | Permalink

    Nice article, Lorelle.

    Alto, an old zen saying: “When the student is ready, the teacher appears…” I’m glad yours did ;’)

  8. Posted September 30, 2006 at 10:54 pm | Permalink

    Thank you, Sam. I have spent much time as a student kneeling at your feet, too. ;-) Nice to work together on a project. hee hee.

  9. Posted November 26, 2012 at 8:17 am | Permalink

    Is there a plugin or easy way to find these markup errors? I am new and evidently I have several on my homepage. I don’t know XHTML and am struggling. I can understand what you are saying. Most of my problems occur because support docs give you code to insert but don’t tell you exactly where to insert it so when it doesn’t work, I have failed to remove it and then look for another fix. I just uploaded a fresh twenty eleven theme as instructed but still have problems. Any help would be really appreciated.

    • Posted November 26, 2012 at 4:08 pm | Permalink

      The errors are most likely attributed to WordPress Plugins not being installed correctly rather than architectural errors. Without more information or example, I can only guess. If you are inserting code from some support documents, and the support documentation for WordPress is usually very specific on where to place it (if not, please let me know so I can fix it immediately), you need to be specific in your question with which documents and what code and where are you putting it. :D There are many ways of adding code to a WordPress Theme and if you do it wrong, you will have errors and validation may not help. I highly recommend that no one dig into the code without some studying first, and back up everything in duplicate at every step in the process. Even the pros do that.

      If the issue is directly related to HTML, this article, Tutorial: Tools for Evaluating and Testing Web Pages and Validation and Testing | Learning from Lorelle features the tools we use to test these things, though you must understand the code as it won’t give you the answers, just tell you what is wrong. The WordPress Support Forum is very helpful, just remember to be very specific. Thanks!

    • Posted November 26, 2012 at 4:20 pm | Permalink

      Thanks for the info. I did read my html line by line and cleaned it up and now it works fine. I think it occurred because I had so much cut and paste content that I’m sure I had stragglers. But, it is fixed now. Thanks.

    • Posted November 27, 2012 at 3:55 pm | Permalink

      Glad to help.


20 Trackbacks/Pingbacks

  1. [...] Call me a purist. I just like to have my code valid. It is also far better for your feeds aswell. They rely on valid code. Lorelle has dug herself into this aswell a while ago and she came up with some tips and hints which might interest you too. Offcourse you should look at WordPress too for they wrote some good stuff on the subject too. [...]

  2. [...] We’ve covered web pages that suck, common validation errors, broken WordPress Themes, finding bad links, optimization, web standards, and bad writing, and now we’ve found another list of more website design and development mistakes you need to know about. [...]

  3. [...] No Road Blocks: A road block for a search engine crawler moving through a website is any element that confuses, distracts, or stops a search engine crawler or spider from moving through your site. Examples of road blocks include HTML/XHMTL errors, lack of connecting and navigational links, lack of text, a table-based design, 404 page not found errors or other dead or moved links, and bad Apache .htaccess or robots.txt files. [...]

  4. [...] Conquering Site Validation Errors [...]

  5. [...] Lorelle VanFossen has made it a shear quest to tell you all there is for making webpages, valid, accessible and just plain accurate. Go and have a look there. Her posts maybe quite lenghty but persisting in reading them makes one a whole lot wiser. [...]

  6. [...] The second most common way things get flummoxed in a WordPress Theme is from validation errors, errors in the code or HTML structure that break web designs. A forgotten DIV, a misspelled tag, or some small error can send a web page design into a skidding wall crash. Sidebars slide to the bottom of the page or spread themselves across half the page overlapping other things. Your header text is now 30cm high when it should only be three. All kinds of funky things happen when a bit of code goes astray and I covered how to find and fix many of those in “Validating the Code Behind the Page” and “Conquering Site Validation Errors”. [...]

  7. [...] Conquering Site Validation Errors [...]

  8. [...] Conquering Site Validation Errors [...]

  9. [...] I was sure would attract a huge amount of attention, written with that in mind. They flopped. Conquering Site Validation Errors, Code Snippets – Help, Cheating, and Goodness, Whose Blogging – Celebrity Blogs on the Rise, CSS [...]

  10. [...] Conquering Site Validation Errors [...]

  11. [...] Conquering Site Validation Errors « Lorelle on WordPress [...]

  12. [...] Conquering Site Validation Errors [...]

  13. […] Conquering Site Validation Errors […]

  14. […] Conquering Site Validation Errors […]

  15. […] Conquering Site Validation Errors […]

  16. […] the post or the footer showing up in the header. They can easily be detected visually, or through validation tests to determine what went […]

  17. […] Conquering Site Validation Errors […]

  18. […] Conquering Site Validation Errors […]

  19. […] be accessible to everyone. This means that the design must meet web standards and pass a range of validation tests in order to be compliant with many countries accessibility and equal opportunity laws. It also […]

  20. […] Code: Make sure the code on your web pages, the CSS and XHTML tags, validate. Errors in tags and site structure can stop a search engine in its […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,103 other followers

%d bloggers like this: