Jan
Is Your Page Valid?
by admin
This is an adendum to How To Create A WordPress Theme - Part 2. I was so focused on creating the web page that I forgot to mention anything about validation!
Why Validate
1> Within the page there are two languages being used xhtml 1.0 and css. In order for the page to display correctly both languages have to written with the correct grammar or, as it is properly called, syntax.
2> Web Pages are now "displayed" on a variety of devices:
- Web Browser
- Screen Reader
- Braille Reader
- Printer
Just to name a few. It is no longer just the Web Browser and even if it was the browser can be within any number of operating systems or platforms. This is why there are web standards.
To work on the different devices you can write different style sheets and target them to a particular device type. If the html is erroneous then the display will be faulty across all devices.
3> In our case, the web page is an intermediate step before breaking it apart to create a WordPress theme. So if this page has errors, they will be magnified when the page is dissected and the theme will never validate without a lot of debugging.
4> Errors in the html can cause problems for the spiders when they try to scan your pages. If there are too many errors they will ignore the page. This means it won’t get ranked… need I say more?
Web Developers ToolBar
The easiest way of checking both is by installing the Web Developers ToolBar for FireFox which also works in Flock.
Once you have installed it go to Tools > Web Developer > Options > Options in the FireFox/Flock menubar, then check that Show Source is ticked.
HTML Validation
Now you can Preview your web page and then select Tools > Validate Local HTML from the Web Developer ToolBar (note: You must be online). If everything is good then you will get the message “This Page Is Valid XHTML 1.0 Transitional!” in a green bar across the screen.
If anything is wrong then you will get “This page is not Valid XHTML 1.0 Transitional!” in a red/rust colored bar. Below this, the errors will be listed along with their line numbers so you can fix the problem.
One thing to watch is that one error can cause a multitude of error messages. What I do is fix one problem at a time and then revalidate. For example, as a test I deleted just one </li> tag and it caused nine error messages!
CSS Validation
This is much the same as the HTML Validation. You Preview the web page and then select Tools > Validate Local CSS from the Web Developer ToolBar. If the page is good you will see “Jump To: Validated CSS” at the top of the page.
If there is a problem you will get “Sorry! We found the following errors” in a red/rust bar followed by the list of errors. The list will have line numbers but the code will not. This can make finding the error harder but it does give enough of the code to make it not impossible.
In conclusion, validating your pages is not exactly rocket science and you will have less problems if you take the extra time to make sure your pages are valid.
Tags: css, html, spiders, web page, wordpress theme
Category wordpress |
Print This Post
|
Is Your Page Valid?…
Browsing around, I see a lot of posts about SEO but I rarely see a post that discusses how to validate your web pages. It’s almost as if validation is taken for granted! There are two validations to be performed on a page - xhtml and css. In this post…
[…] page is more or less finished now. Don’t forget to validate the code. To validate the xhtml use the Web Developer tool bar as usual. If you are using WOS, I […]
Although the basic theme i use validates, since adding various plug-in, widgets etc, all that has come crashing down.
Even adding Flickr images direct cause problems with validation. Any type of Java plugin, like MyBlogLog, causes massive validation errors.
So it seems that although a bare theme or site is validated, once you start blogging and adding things this can soon change. Even if you are careful about adding alt and title tags, there are things that are out of your control.
I have even seen quite important blogs who show the CSS and XHMTL validates badges, yet when you validate them, they ermmm, don’t validate.
Which I have seen a lot of, people wearing these “i have a proper validated site badge’, yet they are far from it.
I imagine, to keep a site 100% pure you need to be very strict on 3rd party plug-ins etc.
Very frustrating.
Just to say, even the Entrecard code causes validation errors, so does one just take that on the chin as such? Except that your entire blog will rarely achieve 100% purity?
There is so much push towards this acieving clean lean code, yet even if as a writer you strive for this, it can really be a lottery.
Im not a coder, but I have read enough books on web standards and accessibilty to know it’s a good thing. And when I tweak my site, and practice coding, I also have this in mind. But i was shocked when I put my current site through the grinder… Too many errors to even want to look at it anymore. MOst of which were caused by the above plug-ins, flickr images, gadgets and wodgets, widgets etc.
Nightmare.
Out of curiosity, does your entire Blog validate 100% for both html and css?
Really disheartened when I see these so called perfect sites and when you run them through a validator they are just plain lying.
@Graham: Yeah validation can be tricky, the EntreCard widget gives 3 warnings/errors and they are the only problems on the homepage. I’m not really happy about that! but haven’t had the time to see if I can fix it yet…
My single post pages have 1 additional error, I have defined the width of this comment box as a percentage instead of the number of columns as I find it more x-browser friendly to get a specific width.
The related comments plugin had to be changed (in the Admin Panel) as it had a paragraph as it’s container and you cannot have a list inside a paragraph, so I made it a div instead.
The social plugin generated quite a few errors for both xhtml and css, but that’s gone now.
My CSS has no errors anywhere.
As you can probably tell, I’m quite anal when it comes to getting it right. Students use to hate me because I wouldn’t even look at their work until they had validated their pages.
[…] have already written about the importance of having your pages validated. Basically, valid code ensure that the page will render properly on different browsers and devices […]