Les titres.

Un document HTML doit être structuré correctement afin d'être bien compris par les lecteurs ainsi que les robots d'indexation des moteurs de recherche. Bien structurer sa page a donc son importance. Le titre principal, les sous-titres et les paragraphes devraient suivre une certaine logique.

 

Par exemple <h1>Titre principal.</h1> donnera :

Titre principal.

Si vous avez besoin d'un sous-titre, utilisez <h2>Sous-titre.</h2> pour :

Sous-titre.

Il peut y avoir plusieurs sous-titres dans une page et ceux si peuvent contenir d'autres sous-titre. Dans ce cas utilisez <h3>Sous-titre secondaire.</h3> pour :

Sous titre secondaire

 

Il y a encore <h4>, <h5> et <h6>, mais ces valeurs ne sont que très rarement utilisées comme sous-titre puisque la taille de la police correspond au texte ou est plus petite ce qui n'est pas le but rechercher d'un sous-titre. Bref, oubliez ces dernières.

La balise h (heading ang.) est de type bloc et est affichée avec les valeurs par défaut du navigateur. Mais grâce au CSS vous pouvez modifier ses paramèttres.

Notre titre est dans un conteneur (div) dont la classe est corps. Il peut avoir une balise <h> dans le menu ou dans un autre conteneur, c'est pourquoi nous allons spécifier à quel de ces conteneurs les attributs de <h> seront appliqués.

 

Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).


1
2
3
4
5
6
7
 

.corps h1{
font-size:1.75em;
color:#000;
font-family:"Times New Roman", Times, Serif;
background:#29f url(images/h1_texture.png) repeat-y;
padding:10px
}

 

Donnera :

Titre principal.

 

Vous pouvez combiner <h2> et <h3> s'ils ont les mêmes valeurs en séparant les balises par une virgule.


1
2
3
4
5
 

.corps h2,h3 {
color:#000;
font-family:"Times New Roman", Times, Serif
padding:10px
}

 

Si vous désirez que les valeurs de la balise <h> soient appliquées à toute la page, écrivez :


1
2
3
4
5
 

h1,h2,h3 {
color:#000;
font-family:"Times New Roman", Times, Serif
padding:10px
}

Elles auront toutes la même couleur et la même police quel que soit le conteneur.

POUR UN SITE PROFESSIONNEL

Téléphone 514 363-4169
Courriel serge@leconcepteur.ca

LE TUTORIEL DU CONCEPTEUR

Coordonnées GPS  http://leconceputeur.ca