Hi There, I'm not sure it's the right place to post about this problem but I'm having a Html and Css problem, I checked the following site www.validator.w3.org and noticed that I have 197 html errors and that both my Html and css are not valid. If you take a look at my blog www.benjamincip.com, I am having a font problem. If you click on the post, you can see that the "about me" text in the right sidebar changed. The font are different. I noticed that this problem only appears in the home page... Any idea how I could fix this problem? I already tried to reinstall the theme and several other method but nothing changed...
Split html with css and js, close every tag as your doctype is XHTML 1.0 Strict, code in lower case, attribute in quotes...... most of the errors are caused by your carelessness.
Thank you very much for your reply myst_dg! Could you tell me a concrete way about how to repair these errors step by step or redirect me to a site that explain how to do it? I don't know how to split html with css and js...
Just a tip, if you are optimizing for search engines like Google..this will not affect your rankings/placement in search results. But if you need to optimize for other gadgets or browsers/mobiles..etc..I think this will be needed. If you do not how to split html with css and js, I suggest reading their tutorials at w3c website.
Splitting HTML and CSS and JS means, your CSS (all that inline style="stuff" in the tags) needs to go out, and be in your CSS sheet. Since you are using a bloggitty template thingie, that's not easy, as those seem to come with a bazillion different CSS sheets by default : ( example: <img style='float: left; margin-right: 10px; border: none;' ... Code (markup): That's very brittle, and in general is considered a Bad Idea, but with steaming piles of template code that's often easier than fighting the template code. The JS should be in external files, and referenced in the <head> in script tags. However this means you need an event loader if you don't have one, because the scripts may otherwise try to load before the HTML they're trying to affect is loaded. This is why tracking JS is commonly in the HTML and before the closing </body> tag, so that it doesn't get called until after the whole page was loaded, and don't want to bother with event loaders. It's good advice, but not something even I could easily follow, because templates suck balls and are hard to fix. There are error-free (or very low error) wordpress etc themes out there (themes are written by regular dudes, some of whom don't know html from their butts, and others who are professionals and very good at what they do) but maybe the best you can do, without looking for another theme, is to work through your errors. Usually 197 errors are caused by like 20 errors. They cascade. So, you usually try to fix the first error, revalidate, and so on. Depending on the error, fixing one may remove 20 more. Some errors are not fixable without rewrites. Some errors are not affecting how your page is being rendered (but affect other things like usability or whatever). It is also possible to fix all your HTML and CSS errors and still have whatever the font problem is (I don't see one here with FF3 on Ubuntu Linux). HTML validation is generally more important than CSS validation, because many normally ok things will trip up the CSS jigsaw validator. CSS3 for instance. It's ok to use CSS3, but it will always be flagged as an error. So will vendor-specific stuff like -moz or -webkit prefixes. Those aren't really errors, just not recognised by the validator. Most of your real errors will be typos like missing ; semicolons and properties and values used improperly border: solid; for example. Browsers may try to figure those out, or will ignore everything after them, or whatever. This is maybe most likely the problem with your right side fonts... I don't see anything wrong, but maybe another browser is dealing with errors differently than mine (the reason we don't want errors, since error-handling is different per browser). Start with the HTML validator errors, and try to fix them. It usually explains what the error is, but some of the explanations don't make sense to non-coders. If you have questions or errors you don't understand, post them here and we will translate.
I just want to add that even though html structure is important it's not essential to getting ranked properly. You basically want your pages to render properly in browsers, properly as in visually correct. Sometimes performance is more of an issue, just look at the google webpage, it doesn't validate at all
Why do people always refer to google when it comes to the validation issue, does this mean you should desire to have an invalid page? When you know HTML properly and you know you can get away with things which the validator might not like like Google then fair enough, you don't have to pass the validator test, having it say successful means nothing. There would be no reason not to use the validator it is only there to help, of course its not essential but why would you not want to use a free tool to help spot typos mismatches and other errors?
There's a balance between performance and validation. Obviously to Google they chose the performance route, their website has millions of views per day. Hence validation isn't as important as performance to them, and that makes sense.
AND, they don't have to fight against their invalid HTML much... their pages are pretty damn simple. Notice that the inner pages often are valid, or with few errors, compared to the older, simpler pages. Though I also noticed that the main search page finally has a doctype now. And if you are unlucky enough to work at a company like Yahoo, know that every time they want to change something, they are crawling through a ton of spaghetti. I wouldn't do that for even a lot of money. I'd rather have a job I enjoy.
Validation enhances Interoperability -- correct rendering in all user agents. However, web pages can, and do, fail validation and still display pretty much as expected in graphical Browsers anyway due to their built-in Markup discrepancy compensation -- thereby relying on the often unreliable error correcting properties of individual graphical Browsers. Validation does catch many easily corrected Markup errors and the resultant code is consequently easy to maintain or change. Pages containing invalid Markup may not display or function correctly in Screen Readers, BRAILLE interpreters and Textual Browsers or when incorporated into other applications. As we move toward the Semantic Web, the rigors of XML will result in a greater requirement for Valid Markup. Valid and well formed Markup also bespeaks careful craftsmanship and that appeals to many web authors. James