H1 un peu alambiqué

[Solar13]

Bonjour à vous,

J'ai besoin d'une présentation spéciale en h1 de ma page.
Le soucis, c'est qu'il me faut un mot d'une couleur, un autre mot d'une autre, un espace particulier entre les lettres et les deux mots.

Du coup, je me demandais si cette présentation chelou n'allait pas nuire à mon référencement, ce sont mes deux mots clés les plus important.

J'ai fait cela:

<h1 id="h1" style="font-weight:normal; font-size:small; margin:0; padding:0; margin-bottom:10px;">
<span style="color:#666; font-size:16px; letter-spacing:5px;">MOT1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999; font-size:16px; letter-spacing:5px;">MOT2</span></h1>

Cela passe ou vous avez des conseils pour moi ?
( C'est bourrin je sais mais je débute )

 

[Anto1982]

Deja moi je :
- deporterais mon style css en utilisant des classes
- supprimerais tous les   (tant qu a faire, su tu veux mettre des espaces, fais le en css)

Pour le reste, je laisse parler les experts ;-)

 

[nickargall]

Hello
Certes le code est bourrin et pas du tout optimisé, mais ce que le moteur verra de ton code, c'est
<h1>MOT1 MOT2</h1>
donc c'est pas mal. Mieux en supprimant les espaces et en les gérant par une marge à droite sur ton premier <span>

 

[Solar13]

Excusez moi d'être un peu lourd, mais je cherche à m'améliorer.

Comment je pourrais le présenter pour que cela donne la même chose de manière optimisée.

Merci à ceux qui voudront me donner un petit coup de main

 

[e-kiwi]

un truc du genre :

dans ton style.css :
#h1{font-weight:normal; font-size:small; margin:0; padding:0; margin-bottom:10px;}
#h1 .mot1{color:#666; font-size:16px; letter-spacing:5px;}
#h1 .mot2{margin-left:30px; color:#999; font-size:16px; letter-spacing:5px;}

et dans ton code :
<h1 id="h1"><span class="mot1" >MOT1</span><span class="mot2">MOT2</span></h1>

 

[nickargall]

ou encore :

dans ton style.css :
#h1{font-weight:normal; font-size:small; margin:0; padding:0; margin-bottom:10px;font-size:16px; letter-spacing:5px;color:#666;}
#h1 span {margin-left:30px; color:#999;}

et dans ton code :
<h1 id="h1">MOT1 <span>MOT2</span></h1>

 

[Solar13]

Merci beaucoup pour vos réponses et vos conseils