XHTML Validation: Does Your Blog Comply?

Since there was such interest in XHTML and HTML Validation, I thought I’d share two more aspects of HTML that can affect the validation of your website or blog. Making changes to your site helps you develop the habit of correctly coding your blog posts or web pages. These points are simple, and you can significantly enhance your site’s load time by improving the consistency of your web pages and blog posts.

Using The Right Nesting Twigs

With HTML, tags usually come in pairs. These pairs like to stay together, they like to nest together. It is important to nest your tags correctly because, as with other aspects of your HTML code, the browser expects them to be nested in the right way. Incorrectly nested tags create confusion and slow down the speed a browser can process code and return a web page.

Correct:
<p>This is a paragraph tag. Inside it we could place a correctly nested tag called <strong>strong</strong></p>

Notice in the above code that the strong tag stays together, completely nested within the paragraph tag. It would have been easy to instead write:

Incorrect:
<p>This is a paragraph tag. Inside it we could place an incorrectly nested tag called <strong>strong</p></strong>

The appearance of the text on the screen would have been identical. It would not appear to be an error when someone views the page, however, while most browsers forgive the error and displays the paragraph with a bold word, it stumbled over the incorrect nesting, taking a moment longer to understand the intention of the code.

The importance of nesting is more significant with some tags. The <div> tag, for example, can play an important part in the layout and design of your blog. Incorrectly nesting this tag will cause display errors on the page. Nesting errors in <table> <tr> & <td> tags can also create display issues and serious loading delays.

Please Lower Your Case

When I first learned to write HTML it was taught in uppercase. Tags were in uppercase, attributes in lower case, and there was a kind of ‘prettiness’ about the code. It looked interesting but the case was not significant. XHTML is less forgiving. Lower Case is considered the right case and uppercase tags are not recognized in the same way.

Tommy Olsson covered this question more eloquently than I have just done in his SitePoint article, “Bulletproof HTML: 37 Steps To Perfect Markup“:

Is HTML case-sensitive?

No, but XHTML is. In XHTML, all tags and attributes must be in lowercase. Traditionally, HTML element names and tags were written in uppercase, but with the advent of XHTML, this convention has slowly given way to the XHTML standard of lowercase element names.

<A HREF=""> is not longer the same as <a href="">. The former will return a validation error. While both cases will work correctly in most browsers the lowercase is considered uniform and script is now always taught (or should be) in lower case.

Want To Learn More?

Still not satiated when it comes to hints and tips for having valid XHTML and HTML? Are there other validation errors on your site or blog that you don’t understand? Please, leave a comment! I’d love to help out with any site issues you’re having and will continue to explain XHTML and HTML Validation if you’re interested in learning more.

You can learn more about valid XHTML, HTML, and CSS in the programmers gospel, W3 Schools.

Test the validation of your own blog with W3’s Validation Service.

Hire a Web Tech to bring your site to compliance because honestly, wouldn’t you rather just be writing?

No related posts.