W3C Validation Nuances

These days, many new and evolving markups are offering functionality never before possible–but they are not “perfectly valid.” So were does that leave us?

The Case FOR Valid Markup

Debugging: When a layout is broken, the first step that should be taken is to make sure the markup is well-formed. Incorrectly nested HTML is a common cause of broken layouts.

Valid HTML is more likely to be future-proof: An invalid page that looks fine in one browser today may not look fine in other browsers or future browsers. This is one way users see a new browser as “breaking the web” when the “breaking” is actually done by the site developers not using forward-compatible markup.

Easier maintenance by adhering to standard rules: When previous, existing, and future developers are all working from the same list of valid elements, there is a reduced chance of confusion about weird vendor-specific or non-standard code.

Search Engine Visibility (SEO): Valid markup is an arbitrary standard. Search Engine bots conform to a specific (though ever-changing) algorithm. Thus, as more and more sites adhere to markup standards, bots will continue to change their weighing algorithm but not the way they crawl a site. Ergo, valid (or very close to valid) markup is rewarded with greater visibility and (hopefully) awarded a more accurate page-rank.

(See also: W3C’s “Why” Documentation and score your site at ProScore.jdm-digital.com)

The Case AGAINST Valid Markup

Besides invalid markup outside of the developer’s control (3rd party plug-ins, for example), some of the latest web development initiatives and techniques have outpaced the standards bodies and use new elements and attributes too new to test against. In other words, the validity test ain’ t always right.

There’s also a fine line between ‘valid’ markup and development best practices. For example, this is technically valid (but not best practices):

<div style="font-size: 140%; font-style: bold; color: #0099cc;">Headline</div>
<div>First paragraph goes here<br />
Second paragraph is here</div>

You don’t have to be a developer to see that the above code (albeit technically valid) does not tell a search engine spider anything about what is important (header tags like <h1>) and what content is in a paragraph (<p> tags). The above code simply formats the content, but offers nothing in the way of search engine visibility.

There is a better way. Take a look at the code example below.

<h1>Important Headline</h1>
<p>First paragraph goes here</p>
<p>Second paragraph is here</p>

Besides being infinitely simpler to code and read, this valid markup is also best practice because it tells search engine bots what’s important (<h1> tag) what’s a paragraph and where they break (<p> and </p>).

Conclusion & Recommendation

Ultimately, what is possible and what is accepted will always be at odds. The goal is all about balance. Follow strict guidelines and you’ll always be behind the times and not necessarily superior to those who don’t. Ignore markup guidelines completely and you’ll end up with a site more akin to Frankenstein than Marilyn Monroe.

Find out where you stand now by pasting your company’s website into W3C’s markup validator, but take the results with a grain of salt.  You can also check your site via our new site grading application, ProScore.