Undo HTML or Style-less (CSS) for Semantic Search Engine (SEO)

Dear member of the list,

I have appreciated the effort recently of Tantek Celik to demonstrate 
that html elements have basically no defined styles by definition.

In his article “undoing html.css”, he's giving a CSS that will help you 
to create a fresh start and to not rely on default CSS styles of some 
browsers. That's just neat!
	http://tantek.com/log/2004/undohtml.css


* Semantics and style

It's often very hard to explain the Semantics to users, designers, etc. 
because as human, we are used to guess the semantics of a document by 
its style. We will guess that this part is a title, because of a bigger 
font, because it's bold, because of its position.
Search Engine and other kind of tools in charge of analyzing the 
structure of a text can't see that. :) It's why the first step of 
Tantek is very good, because it shows your text almost as a search 
engine “is seeing” it.


* Using CSS as a tool to show semantics

But could we use CSS to “show” what each search engine is indexing in 
priority (commonly called Search Engine Optimization - SEO). It will 
then be a stylesheet that would help you to define how a particular 
search engine sees your document. Though the danger of this game is 
that people focus only on what will improve their indexing and not what 
improves the semantics of the text.

Let's try with Google.
We know that Google gives more weight to h1, h2, strong and links (a 
href), alt

At the top of your document, you can add:
	<link rel="stylesheet" media="screen" href="undo.css" />
	<link rel="stylesheet" media="screen" href="google.css" />

google.css
=================
h1, h2, strong, a {
	background-color: yellow;}

img:before {
	display: block;
	content: attr(alt);
	background-color: yellow;
	}
=================

I'm pretty sure it's a start and I have forgotten elements that are 
used in a precise context by Google. Other search engines might react 
differently too.

Important things:
	* Search engine are one way of really demonstrate the semantics of 
HTML by taking advantage of the real meaning of used HTML element. For 
instance, create a quotation search engine.
	* This technique is also a way if you choose different colors in a 
wysiwyg editing tool to define editable zone. (pink= h1, blue = h2, 
gray = p, etc.)



-- 
Karl Dubost - http://www.w3.org/People/karl/
W3C Conformance Manager
*** Be Strict To Be Cool ***