Mise en place des balise H1, H2. etc

gti · 17 Avril 2008

Bonjour

dans le but d'améliorer mon référencement je suis en train de m'occuper des balise H1, H2...etc

Comme je ne code pas la moindre ligne, c'est Dream qui fait ça pour moi, et il propose ces balises dans le menu FORMAT

Si je créer un style CSS, que j'appelle H1, avec des attributs perso,
que j'applique ce style à une partie de mon texte, est ce que ce sera
considérer par les robots comme une vraie balise H1, et l'effet sera
t il le même que Format de Dream ?

Quelle est la différence entre le Format H1 proposer par Dream
et un style H1 créer personnellement ?

Merci d'avance

e-kiwi · 17 Avril 2008

c'est la même chose. bien sur que tu peux styliser un h1 avec un style css, on voit rarement des h1 en 30px noir / gras / marge de 1cm sur des sites

blman · 17 Avril 2008

Euh non... e-kiwi, c'est pas la même chose

Le format H1 créera une balise structurée H1. En code ça donnerait ça :
<h1>Mon titre</h1>

Le style H1 créera une mise en forme qui a pour nom H1. En code ça pourrait donner ça :
<span class="H1">Mon texte</span>

Même si visuellement, ça peut effectivement donner la même chose, sémantiquement, c'est faux. <span class="H1"> n'est pas un titre alors que <h1> est un titre.

Donc l'idéal searit de donner le format H1 à ton titre et de le styliser, pourquoi pas, avec un style nommé h1

gti · 17 Avril 2008

Merci pour ces infos

Est ce quelque chose comme ça c'est correct ?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.decor-h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #CC0000;
	text-decoration: none;
}
.decor-h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #0066CC;
	text-decoration: underline;
}
-->
</style>
</head>

<body>
<h1 class="decor-h1">Titre H1</h1>
<h2 class="decor-h2">sous titre h2 </h2>
</body>
</html>

HawkEye · 17 Avril 2008

C'est correct.

kmenslow · 17 Avril 2008

Mieux vaut mettre ceci

Code:

h2 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   font-weight: normal;
   color: #0066CC;
   text-decoration: underline;
}

ainsi dans le code de la page ce sera

Code:

<h2> Titre du truc much</h2>

HawkEye · 17 Avril 2008

Sauf s'il a différents types de présentations incluant des h2, et qu'il ne maîtrise pas forcément l'aspect "cascaded" d'une stylesheet

(mais d'un point de vue technique, tu as entièrement raison, et je ne peux qu'être d'accord avec toi sur le fait qu'un code propre est un sérieux atout, si non pour le référencement, au moins pour la maintenance et la portabilité).

tonguide · 17 Avril 2008

mieux vaut mettre des H1 par partie.

Exemple, si ton H1 doit se trouver en header, mais sur une autre page dans le contenu (selon la partie quoi)

tu fais par exemple
<div id="header">
<h1>titre</h1>
</div>

#header h1 { ton css }

et pareil avec un #content h1 ...

Si tu auras toujours le même h1 (h2 ...) tu fais comme le dis "kmenslow"

Si tu veux faire comme tu fais, précises au moins le style

Donc .decor-h1 tu le remplaces par h1.decor-h1, c'est plus clean

PS : avoir une "class" pour un élément H1 qui est sensé être unique, c'est paradoxal

e-kiwi · 17 Avril 2008

ah ok j'avais mal lu la question, je pensai qu'il demandait si le choix "format h1" était bien un h1

Marie-Aude · 17 Avril 2008

Euh....

Pour formatter un h1, on fait un css

h1 {blablblab}
Le h1 s'affichera partout de la même façon dans le site

Pour formatter un h1 avec une classe spéciale par exemple decor

on fait
.decor h1 {blablba}
et certainement pas decor-h1 qui n'est plus vu comme un h1

Tu peux surtout réfléchir à l'endroit où va se trouver ton h1, et le formatter différement selon l'endroit
Ainsi si tu l'inclus dans un div avec une id spéciale, tu peux créer
#idmachin h1

etc...

tonguide · 17 Avril 2008

Je crois que tu as pas tout suivis

Marie-Aude a dit:
on fait
.decor h1 {blablba}
et certainement pas decor-h1 qui n'est plus vu comme un h1

et ça c'est faux

Si il fait <h1 class="decor-h1"></h1> comme il l'explique, ça sera toujours pris comme un H1

et .decor h1
ça marche si c'est <div class="decor"><h1></h1></div>

Ce qui est plus le même code.

Lio7 · 17 Avril 2008

Roh le pauvre gars ! Tout ceci va l'embrouiller ^^

En résumé :

1 - Tous les titres H1 de ton site sont les mêmes ?

Tu peux définir les propriétés de tous tes titres h1 ainsi :

Code:

h1 {
font-family : serif;
font-size : 1.4em;
etc ...  }

2 - Tu as des titre H1 en rouge dans tes news et en vert dans ton wiki ? Alors ta méthode convient :

Code:

En CSS :

.titre-news {
color: red; }

.titres-wiki {
color: green; }

En XHTML :

Dans les news : <h1 class="titre-news">Mon titre de news</h1>
Dans le wiki    : <h1 class="titre-wiki">Mon titre de wiki</h1>

Bonne chance

gti · 17 Avril 2008

En effet mes H1, H2...etc sont les mêmes partout, et mes CSS sont stockés sur des fichiers séparés donc ???

Lio7 · 17 Avril 2008

Tu as des feuilles de styles différentes pour chaque page ?

gti · 17 Avril 2008

en fait j'ai autant de feuille de style qu'il y a de style.

Vous aurez remarquez que je suis vraiment nul coté code
et quand j'ai créer mon site j'ai cru bon de faire comme ça.

J'ai donc un répertoire avec les 10 fichiers *.css que "j'appelle" sur chaque page.

Je me doute que ce n'est pas l'idéal, mais ne sachant pas faire autrement...

a bon entendeur

Lio7 · 18 Avril 2008

Je suis allé voir les CSS du site dans ton profil, et en effet, tu gères très mal tes styles.

En fait, tu te compliques la vie.

Toutes ces propriétés, tu dois les regrouper dans un seul fichier que tu appelles "styles.css" par exemple.

À l'intérieur, tu insères tes propriétés au fur et à mesure, tout en gardant un ordre logique : d'abord les propriétés de la page, puis du menu, puis du texte ... etc

Exemple avec un de mes CSS : http://www.danielsimon.fr/pictures.css

Ensuite tu insère cette feuille de style dans le <head> de tes pages (x)HTML :

<link rel="stylesheet" type="text/css" href="styles.css" />

Tout est synthétisé dans un seul fichier bien organisé !

gti · 18 Avril 2008

Merci pour ces conseils Ravn (et les autres) je suis en train d'épurer mon code avec ta solution,
qui en plus à le mérite de me faire mettre la main dans le "cambouis" et de code un peu.

Pour revenir au code, j'ai crée un style h1 pour styliser mon format H1 :

Code:

.h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}

Questions :

* Puis je le nommer/renommer le style .hotel par exemple ?

* Puis je l'appliquer à tous mes titres H1, sans influencer le référencement ? Autrement dit, le fait de d'appliquer un style à un format peu il changer qq chose ?

* le nom même du style .hotel par exemple - peu t il aussi influencer le référencement ?

* La différence de taille entre le titre H1, H2...etc une fois stylisés est t elle importante ? H1 > H2

* Pourquoi Dream averti avant de créer un style nomé H1 - Qu'appelle t ils classe chez Adobe ? (Balise HTML = format et classe = style c'est ça ?)

la suite au prochain épisode

Pandore · 18 Avril 2008

Pour te répondre rapidement :

1) oui

2) non. Dans ce cas précis, c'est une mise en forme du texte de la balise titre, c'est tout.

3) non.

4) Tu n'as pas bien saisis les bases on dirait.

:arrow: Une balise permet de faire une action. Exemple, la balise "h1" permet de faire un titre de niveau1.

:arrow: Une class permet de mettre en forme les éléments d'une page web. Exemple, font-family: Verdana, Arial, Helvetica, sans-serif; permet de définir la police à afficher pour le texte.

Il vaut mieux éviter de choisir pour les noms de class des noms de balises existantes. D'où le message d'avertissement de ton soft.

:wink:

Lio7 · 18 Avril 2008

Aïe Aïe Aïe, je dois mal m'y prendre car c'est pourtant très simple.
Merci pour ta présentation claire des questions, on va pouvoir détailler ça de façon propre

Déjà il faut une mise au point sur le voc : :

Balise : élément HTML avec lequel tu codes : <body>, <title>,<h1> et <a> sont des balises.
Style : règle en CSS que tu rentres dans ta feuille de style entre deux accolades { }

Si j'ai bien compris, dans ton code, tu as des titres encadrés par des balises <h1>, ce qui est très bien pour le référencement. Tu as donc ce code sur toutes tes pages :

<h1>Le titre de ma page</h1>

Si toutes tes titres <h1> sont les mêmes, alors la logique, veut que tu règle les propriétés standards des tes titres <h1>.

Code:

h1 {   /* Je n'ai pas mis de point devant h1 !! */
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   font-weight: bold;
   color: #000000;
   text-decoration: none;
}

De même que si tout des paragraphes sont en rouge :

Code:

p {color: red; }

Ça ce sont les règles générales pour chaque type de balise. Tu me suis ?

Maintenant les class et les id, imagine qu'un paragraphe soit particulier et qu'il doivent être vert. On utilise une class dans le code HTML pour le signaler :

Code:

<p class="couleur-verte">bla bla bla bla</p>

Et ont insère un style pour ce class dans le CSS :

Code:

.couleur-verte {color: green;}

Tu peux ensuite réutiliser cette classe pour rendre un lien vert par exemple !
As-tu remarqué que j'ai choisi un nom "intelligent" pour ce class ? Il est bon de nommer les class en fonction de ce qu'ils font !

D'où l'avertissement d'Adobe, tu crée un attribut class est nommé .h1 c'est très ambigu vu que ça rapelle la balise <h1> !

Il vaut mieux l'appeller .hotel si ça te chante (mais ce n'est pas un bon nom quane même

)

Pour finir, sache que tu ce qui concerne le code pur : balises, class, commentaire n'influe pas sur le référencement : les robots s'intéressent surtout à ce qui est dans les balises : le texte, les images ...

Lio7 · 18 Avril 2008

Aïe Aïe Aïe, je dois mal m'y prendre car c'est pourtant très simple.
Merci pour ta présentation claire des questions, on va pouvoir détailler ça de façon propre

Déjà il faut une mise au point sur le voc : :

Balise : élément HTML avec lequel tu codes : <body>, <title>,<h1> et <a> sont des balises.
Style : règle en CSS que tu rentres dans ta feuille de style entre deux accolades { }

Si j'ai bien compris, dans ton code, tu as des titres encadrés par des balises <h1>, ce qui est très bien pour le référencement. Tu as donc ce code sur toutes tes pages :

Code:

<h1>Le titre de ma page</h1>

Si toutes tes titres <h1> sont les mêmes, alors la logique, veut que tu définissent les caractéristiques de ces titres une bonne fois pour toutes :

Code:

h1 {   /* Je n'ai pas mis de point devant h1 !! */
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   font-weight: bold;
   color: #000000;
   text-decoration: none;
}

De même que si tous tes paragraphes sont en rouge :

Code:

p {color: red; }

Ça ce sont les règles générales pour chaque type de balise. Tu me suis ?

Maintenant les class et les id. Imagine qu'un paragraphe soit particulier et qu'il doive être vert. On utilise une class dans le code HTML pour le signaler :

Code:

<p class="couleur-verte">bla bla bla bla</p>

Et ont insère un style pour ce class dans le CSS :

Code:

.couleur-verte {color: green;}

Tu peux ensuite réutiliser cette classe pour rendre un lien vert par exemple !
As-tu remarqué que j'ai choisi un nom "intelligent" pour ce class ? Il est bon de nommer les class en fonction de ce qu'ils font !

D'où l'avertissement d'Adobe, vu que tu crée un attribut class nommé .h1 ! C'est très ambigu car ça rappelle la balise <h1> !

Il vaut mieux l'appeller .hotel si ça te chante (mais ce n'est pas un bon nom quane même

)

Pour finir, sache que tu ce qui concerne le code pur : balises, class, commentaires ... n'influe pas sur le référencement, car les robots s'intéressent surtout à ce qui est dans les balises (le texte, les images ...).

PS : Un peu de lecture !

gti · 18 Avril 2008

Les nuages se dissipent peu à peu et je commence à y voir + clair grace à tes - vos - explications.

Tu me dira, il serai temps !!

J'ai réussi à intégré et rangé mes CSS au sein d'un seul et même fichier nommé style.css comme tu me l'a suggéré.

Encore une petite :

Puis je attribuer un lien à un texte qui à un H1 par exemple ?

Lio7 · 18 Avril 2008

Tu veux dire inclure un lien dans un titre <h1> ?

Comme ça ? : <h1><a href="#">Mon lien</a></h1>

Tu joues avec le feu ...
Ne crois-pas que c'est la balise <h1> en elle même qui est importante, sinon tu vas vite rejoindre le côté obscur de la force.

L'important est de structurer son code avec des balises Hx. Google y verra un point positif (donc quelques places de plus

). N'oublie pas :

Code:

<h1>Titre principal</h1>

   <h2>Sous-titre 1</h2>

   <h2>Sous-titre 2</h2>

         <h3>Rubrique</h3>

Il semble que tu débutes, alors autant éviter d'entrée les erreurs de jeunesse :

Oublie :
- le bourrage de mots-clés dans la page,
- les liens dans les balises <h1>
- le "PR 4 ever"
- Les inscriptions à la pelle dans les annuaires.

L'avenir du référencement c'est :
- un code propre et valide (les balises <Hx>

)
- un vrai contenu
- des titres et des URL optimisés
- des liens en dur sémantiques
- etc ....

Voilà un petit sommaire qui devrait t'éclairer, mais n'oublie pas que Tout commence ici !

Je pars pour le WE, alors bonne chance avec ton code

Pandore · 19 Avril 2008

RavN a dit:
Tu veux dire inclure un lien dans un titre <h1> ?

Comme ça ? : <h1><a href="#">Mon lien</a></h1>

Tu joues avec le feu ...

ça se discute. Ce n'est pas interdit de le faire.

Après faut voir l'utilité de la manœuvre. Perso, je ne le fais uniquement que pour la page du plan de site. Cela permet d'accéder directement à la page en cliquant sur le nom qui est dans le titre. Pour le reste, pour moi, cela n'a strictement aucune utilité. :wink: