Le pourquoi du comment et je teste mon h1

Le contenu des sites Internet se compose majoritairement de balises html et de css. D’un point de vue intégration, il s’agit pour le premier de la structure, et du second de l’habillage.
Dans un système comme WordPress, les rédacteurs/clients s’en servent sans vraiment s’en rendre compte grâce aux éditeurs WYSIWYG, qui leur permettent d’ajouter leurs titres, leurs images, leurs listes à puces et autres modifications de polices d’un simple clic.

Il est donc important de s’assurer que l’ensemble de ces éléments vont d’une part s’afficher correctement, et d’autre part s’agencer correctement les uns part rapport aux autres.

La prévention dès les maquettes / La communication avec le graphiste

La plupart des graphistes ont des yeux bien plus exercés que la moyenne, notamment aux niveaux des marges et autres espaces blanc. Ils peuvent également s’avérer relativement maniaques au niveau des couleurs. Et leur dernière bête noire est le non-respect de la cohérence de leur thème et/ou de leur charte graphique.

Il est donc de notre devoir d’intégrateur de leur rappeler quels sont les éléments qui peuvent apparaitre dans du contenu basique.De cette manière, tous les cas sont gérés et il n’y a pas de mauvaise surprise lors du développement.
N’oubliez pas également de leur indiquer qu’il peut exister des limitations techniques, et que le but du jeu est également de tout uniformiser ; en cas de doute demandez leur avis et laissez les trancher 😉

Depuis quelques temps, je demande systématiquement aux graphistes avec qui je travaille de me faire une maquette dédiée, à partir d’un gabarit relativement vide (en général une “pleine page”) et d’y ajouter les balises présentées dans la section suivante. Lors de l’intégration, la page est recrée et l’ensemble des éléments sont présentés tels qu’ils apparaitront à la livraison du site.

Les principales balises utilisées

En plus des balises de titre h1, h2, etc. je vous conseille d’ajouter quelques paragraphes p de texte aléatoire / Lorem Ipsum ou autre /afin de permettre de juger des marges verticales entre les différents éléments (h1 par rapport au paragraphe, paragraphes entres eux, etc.) mais également de l’occupation de l’espace horizontal.

Cela reflétera d’autant plus les futurs contenus du site et vous permettra donc de mieux juger. Ajouter également un peu de texte en gras lié à la balises strong, et également du texte en italique lié à la balise em ou i.

• Les balises ul li permettent quand a elles d’afficher des listes à puce non ordonnées
  • N’oubliez pas d’essayer plusieurs niveau d’imbrications !
    • cela ira rarement au delà de trois niveaux 😉
• Premier point
• Deuxième point
• 3eme point

Pensez également à ajouter quelques liens / balise a / dans vos textes, et pas qu’un seul. cela sera d’autant plus facile de vérifier les différents états des liens / normal a / au survol a:hoover / visités a:visited / actifs a:active.

1. Les balises ol li se chargent des listes ordonnées
   1. Un autre décalage
2. A la deux
3. A la trois

Mon titre h4, ou comment flinguer son référencement naturel

Et alors que ca paraissait vraiment intéressant, j’illustre mes propos en ajoutant lâchement quelques paragraphes de Lorem Ipsum.

Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d’entre elles a été altérée par l’addition d’humour ou de mots aléatoires qui ne ressemblent pas une seconde à du texte standard. Si vous voulez utiliser un passage du Lorem Ipsum, vous devez être sûr qu’il n’y a rien d’embarrassant caché dans le texte.

Edit 2023 : Emmet > “lorem150” pour générer 150 mots de lorem.

Tous les générateurs de Lorem Ipsum sur Internet tendent à reproduire le même extrait sans fin, ce qui fait de lipsum.com le seul vrai générateur de Lorem Ipsum. Iil utilise un dictionnaire de plus de 200 mots latins, en combinaison de plusieurs structures de phrases, pour générer un Lorem Ipsum irréprochable. Le Lorem Ipsum ainsi obtenu ne contient aucune répétition, ni ne contient des mots farfelus, ou des touches d’humour.

Conclusion

Aller encore quelques lignes histoire de soutenir moralement le h5, et d’illustrer également la balise de citation blockquote.

Cochon // la quote de porc

Une page telle que celle ci n’est pas tellement fastidieuse à produire (surtout en utilisant uniquement du Lorem) et vous pourrez bien entendu la réutiliser sur l’ensemble de vos sites développés.

Mine de rien intégrer ça au processus peut vous faire éviter une paire de jours d’aller-retours tumultueux entre vous / le graphiste et le client ; voir pire avoir à re-travailler sur le site pour des corrections mineures alors que l’affaire semblait bouclée. Sur ce, je vous souhaite de bonnes corrections.

EDIT 2018 : Voici un exemple concret de toolbox : http://cake.masamune.fr/_toolbox.html

EDIT 2018 ++ : Voici un exemple de code html toolbox (à inclure entre votre header et footer) contenant une bonne partie des balises à styler !

Edit 2023

Toujours d’actualité, même si souvent quand j’en ai l’occasion je passe par les boilerplates Bootstrap / Divi.

Concernant le référencement, une bonne pratique consiste à bien rentabiliser l’ensemble des nouvelles balises html5 orientées sémantique 😉