Does Google Prefer Valid HTML & CSS?

Blog subscribers

What does Website Accessibility have to do with SEO?

Valid code is a sign of a web developer who has a passion for web accessibility, usability and good design – with an attention to detail, and a pride in their work. A site built to standards is often easier to access using many devices. The idea is to have clean, properly marked up code. A good content-to-code ratio.

Essentially what is being stated is a fairly logical conclusion: reduce the amount of code on your page and the content (you know, the place where your keywords are) takes a higher priority. Additionally compliance will, by necessity, make your site easy to crawl and, additionally, allow you greater control over which portions of your content are given more weight by the search engines. The thinking behind validating code for SEO benefits is that, once you have a compliant site, not only will your site be a better user experience on a much larger number of browsers, but you’ll have a site with far less code, that will rank higher on the search engines because of it.

That sounds nice, but in reality, it’s difficult to prove, especially in competitive verticals.

To be sure, W3C validation is not the “SEO magic bullet” to top rankings. There is no magic bullet.  There IS an argument to take every advantage you can –  to not only get to the first page, but to consolidate your position against those who want to take it from you (as you took it from someone else) but for me, making a website validate is not a priority, when it comes to Google rankings, as there are more important factors at play than page level code quality.

If Google can read it – it will rank it. Google was built to understand websites with low-quality code, and it’s got a lot better over the years. I have never observed a site that was inaccessible run into major ranking problems that weren’t probably caused by other more important quality factors.

While there are benefits, Google doesn’t really care if your page is valid HTML and valid CSS. This is clear – check any top ten results in Google and you will probably see that most contain invalid HTML or CSS. I love creating accessible websites but they are a bit of a pain to manage when you have multiple authors or developers on a site. It’s easy to let standards slip, on your own site.

If your website is VERY badly designed with a LOT of invalid code even Google and browsers cannot read it, then you have a problem. I’ve not come across many sites in that bad  a condition, recently.

Where possible, if commissioning a new website, demand at least minimum accessibility compliance on a site (there are three levels of priority to meet), and aim for valid HTML and CSS. Actually, provision of web accessibility is law in the UK and in some other countries, although you would not know it, and be prepared to put a bit of work in to keep your validation badge.

Valid HTML and CSS are a pillar of best practice website optimisation, not strictly search engine optimisation (SEO). It is one form of optimisation Google will not penalise you for.

Where can you test the accessibility of your website – Cynthia Says – – not for the faint hearted! :)

Addition – I will be following W3C recommendations that actually help SEO;

Hypertext links. Use text that makes sense when read out of context. W3C Top Ten Accessibility Tips

Testing; Does Google Prefers Valid HTML?

WAY back in 2007 I ran a (VERY SMALL SCALE!) test to see if I could quickly see if Google preferred Valid HTML and VALID CSS. (Please note I have since modified my site heavily (and hastily) and removed old pages, including these test pages – but there were up for people to look at themselves at the time – back in 2007!).

It consisted of:

  • 4 Pages on the hobo site
  • New but Duplicate Content of Course
  • All HTML pages
  • All page names garbled letters to ensure no preference in Google. Will Google read the pages by alphabetical order, date created etc? Who knows – maybe we’ll find out this too.
  • 1 Valid HTML + CSS
  • 1 Valid HTML + Invalid CSS
  • 1 Invalid HTML + Valid CSS
  • 1 Invalid HTML + Invalid CSS
  • Anchor Text same text so as not to influence Google (of course this isn’t good for accessibility having links to different pages using the same text phrase)
  • As far as we know we’ve tried to duplicate the pages including page titles and meta-descriptions etc. What this test should also test is will Google, today at any least, collect at least one page from this duplicate content or will it ignore them all.
  • We assume everything is equal apart from validation – that includes duplicate keyword descriptions, keywords and title elements etc.
  • In this first test we’ll put it in a folder. This may make everything go supplemental but we can wait and SEO ;)

I was actually surprised at the results. From these 4 pages Google ranked the page with valid CSS and valid HTML top. Google spidered the pages, examined them, applied duplicate content filters as expected, and selected one to rank. It just happens that Google seems to prefer the page with valid code as lay down by the W3C (World Wide Web Consortium).

Was this evidence Google preferred Valid code at a very granular level?

Well at the time, I thought so, but I had a lot to learn about testing SEO, and in the end, I could not determine if Google just picked the most recent edited documents. It WAS the last edited document that came top, as well as it being valid.

I didn’t run the test again.

Google has since claimed this is NOT a direct ranking factor, in both the video above, and in the video below:

FYI – What is CSS?

CSS, or Cascading Style Sheets, is a ‘language’ that website designers use to develop the style, look and feel of layout, text and colours on a website page.

Used properly, CSS can be used to separate design from content, making websites easier to use and ultimately, maintain. It can also help with download times as the CSS is downloaded only once and held in browser cache.

A good (the best?) website development technique is to build your pages using HTML and link this page to what is called an external CSS file that controls all elements of style on the site. You then link the stylesheets in your like so:


  • CSS means (is an acronym for) ‘Cascading Style Sheets’
  • CSS Styles help define how to display HTML elements in a browser
  • CSS Styles are normally stored in ‘External’ CSS Style Sheets on a site
  • CSS Styles were added to HTML 4.0 by the W3c
  • External Style Sheets can save website designers a lot of time and effort when updating sites – we at Hobo use them
  • Multiple CSS style definitions are designed to ‘cascade’ into one

What Is CSS For?

HTML tags / elements were originally designed to define the content of a document. They were supposed to say “This is a header”, or “This is a less important header “, or “This is a paragraph “, and by using tags.

The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

Netscape and Internet Explorer continued to add new HTML tags and attributes (like the tag and the colour attribute) to the original HTML specification. It soon became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document’s presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) – the non profit, standard setting consortium, responsible for standardizing HTML – created STYLES in addition to HTML 4.0.

All major browsers support Cascading Style Sheets, although some, handle them slightly differently, which an be a pain to the website designer!

Cost Effective Website Development

CSS defines how HTML elements are to be displayed. CSS Styles are normally saved in external .CSS files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!

CSS allows website developers to control the style and layout of multiple web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many website pages as you want. To make a site-wide change, simply change the style, and all elements in the website are updated automatically.

Multiple Styles Will Cascade Into One Style

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

Cascading Order of CSS

CSS styles will “cascade” into a style by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the <head> tag)
  4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

For a more complete guide to CSS – visit W3C Schools.

UK Government recommendations:

‘Use HTML to structure the document, not style it. Use Cascading Style Sheets to format and style basic elements of a website’

Guidelines for UK Government websites
Illustrated handbook for Web management teams