Ceci est un titre de page en H1 + style « titre moyen »
Ceci est un texte qui peut se trouver dans le header sous le titre
Sur une page web, la structure des titres (balises title) doit toujours être :
- 1 seul titre H1 (généralement en premier sur la page)
- Plusieurs titres H2 pour les paragraphes, pour les sections, les grilles, etc. Tous titres des éléments importants.
- Les titres H3 viennent sous les H2.
- Les titres H4 viennent sous les H3.
On évitera de revenir en H2 après avoir placé des H3 ou H4. Généralement, on placera 1 H3 et 1 H4 max par page avec cette règle.
Les balises title servent à la structure des pages pour Google. Il s’agit donc d’un réglage technique. Mais on peut également utiliser une balise title H2 avec un style de titre en H1. Cela permet de spécifier correctement le balisage tout en utilisant le style H1 pour le titre dans cet exemple.
Voyons ci-dessous les différentes possibilités de polices :
Voici un titre H1 avec la police Heebo et une taille de 36px
Voici un titre H2 avec la police Archivo et une taille de 30px
Voici un titre H3 avec la police Bellota et une taille de 26px
Voici un titre H4 avec la police Iceberg et une taille de 17px
Ceci est le corps du texte général du site. Idéalement, les polices doivent être choisie en tant que polices Google. Le système dispose de toutes les polices Google. Si une autre police est choisie, elle devra être fournie par vos soin et vous devez disposer des droits d’utilisation (selon les polices).
Le corp du texte est ici en police Lato d’une taille de 16px.
Pour chaque type de titre, nous pouvons choisir une police, une taille et une couleur. Ensuite, dans tous le site, nous stylons les éléments depuis cette règle générale.
Voici un exemple de mise en page
Comme vous pouvez le voir ci-dessus, le titre qui est censé être un H2, donc ses paramètres title le sont, mais il est stylé en H3 pour son affichage.
Titre de ma grille en H2
Texte META, utilisé pour une info supplémentaire
Corps de texte pour les détails de mon message. Notez que des styles supplémentaires peuvent êtres utilisé comme la taille du titre H1 dans le header, pour donner un style « Titre large » à certains éléments par exemple.
Le but de la grille est d’avoir une répétition
La META peut être utilisée ou pas
Ainsi avec plusieurs éléments qui ont tous le même réglage général quand aux titres, meta et texte.