espacement Hn
Photo by Jessica Ruscello on Unsplash

Tous designers aspirent à ce que chaque page web qu’ils créent soit attirante. Je parie que ça fait également partie de tes objectifs ! Commence alors par t’occuper des espacements entre tes titres et sous-titres (aussi appelés Heading). J’ai trouvé une solution automatisée qui va te rendre la vie plus facile : tu pourras réaliser le calcul de l’espacement Hn automatiquement. Mais avant, sais-tu réellement quels sont les avantages à utiliser les Hn sur un site web ?

Utiliser des Hn : bonne ou mauvaise idée ?

En utilisant des Hn, tu peux être sûr que les pages web que tu crées seront plus claires et plus compréhensibles. Tu fais d’ailleurs d’une pierre deux coups : non seulement les pages plairont aux internautes, mais elles le sont aussi vis-à-vis des moteurs de recherche.

Dis-moi : est-ce qu’il t’est déjà arrivé de faire face à une page qui ne comportait qu’un long pavé de textes ? Qu’est-ce que tu as ressenti ? Moi, j’en rencontre tout le temps. Je dois t’avouer qu’elles me font tout de suite fuir, avant même que j’aie eu le temps de comprendre de quoi elle parlait.

espacement Hn
Photo by Pine Watt on Unsplash

Alors, si un humain a du mal à comprendre un texte dénué de Hn, que ferait une machine ou un robot ? Certes, ces derniers sont intelligents, mais pas assez pour déchiffrer de telles informations. D’où l’importance de hiérarchiser les arguments, les idées… C’est précisément là que les headings (différents Hn) entrent en jeu. Ils facilitent la structuration d’une page web. Et si le calcul de l’espacement Hn est bien fait, le résultat est encore mieux.

Aussi, les internautes adorent les pages bien structurées. Cela leur donne une bonne expérience utilisateur.

Les Hn sont bien plus importants, côté SEO

D’un point de vue SEO, la mise en place de différents Hn et le calcul de l’espacement Hn sont aussi d’une importance capitale. J’ai déjà abordé le sujet tout à l’heure, comme quoi il serait plus facile aux moteurs de recherche de comprendre de quoi parle le site web.

Google n’aura aucun mal à indexer ton site. Est-ce que tu as déjà pris le temps de lire mon autre article sur les astuces SEO pour faire apparaître ton site dans les meilleurs résultats de recherche, tu te souviens peut-être d’un de mes conseils : il faut insérer des mots clés dans les Headings. Ce faisant, tu fais comprendre à Google de quoi parle encore ta page, ton site.

espacement Hn
Photo by Jonny Caspari on Unsplash

Comment placer les Hn et faire le calcul de l’espacement Hn ?

Si tu veux que tout se passe bien, il faudrait quand même respecter une certaine règle. En plaçant les différents Hn, tu dois absolument le faire par ordre. Jamais, il ne faut sauter de niveau ; sachant que les Hn sont composés de : H1, H2, H3, H4, H5 et H6. Les plus utilisés étant les H1 jusqu’à H3.

Voici un exemple plus concret :

Il faut structurer une page de cette manière : H1 > H2 > H3 > H4..., et non de la sorte : H2 (en tête de page) > H4 (suit tout de suite ce H2) > H1 > H3... Bref, il est question de simple logique.

Par ailleurs , il est important d’équilibrer le nombre de Hn. Ce ne serait pas convenable d’insérer plusieurs H1 ou plusieurs H2, ou encore plusieurs H3. D’ailleurs, pour une page, un seul H1 est permis. Les H2 jouent le rôle de sous-titre, et H3, des sous-sous-titres.

Par exemple :

  • H1
  • Introduction
  • H2
  • Paragraphe
  • H3
  • Paragraphe
  • H3
  • Paragraphe
  • H2
  • Paragraphe
  • Conclusion

Le H1 sert généralement à décrire tout le contenu (une sorte de résumé en 4 ou 5 mots) ; il s’agit du titre général du texte. Veille bien à ce qu’il ne contienne pas trop de mots, et comporte le mot clé principal.

espacement Hn
Photo by Rolands Zilvinskis on Unsplash

Comment fonctionne la mise en forme des Headings ?

De base, le H1 a la taille la plus grande de tous ; il est également le plus gras. S’ensuit alors le H2, puis H3 et ainsi de suite. Tu dois toutefois savoir qu’on ne parle pas ici de mise en forme, mais de “structure”. Ces tailles et niveaux de gras montrent seulement l’importance des headings.

Or, il est tout à fait possible de changer leurs formes, de manière qu’elles soient attirantes visuellement, et ainsi, rendent l’ensemble de la page agréable à voir. En général, ces typographies dépendent des thèmes et CSS adoptés pour le site.

Or, voici comment tu peux t’y prendre avec ces mise en forme et espacement Hn.

Utilise un guide de style

Est-ce que tu te souviens du guide de style dont je te parle souvent. J’en donne à ceux qui suivent ma formation (et c’est gratuit).

Pour chaque Heading, j’ai choisi une taille et une typographie précises. À chaque nouvelle page que tu crées sur Webflow, les Hn adoptent automatiquement ces tailles et typos. Seulement, tu ne vas pas forcément aimer le style que j’ai peaufiné. Ce n’est pas un problème, sache que tu peux créer ton propre guide de style.

Fais-toi aider par type-scale.com

Le problème, quand tu devras créer ton propre guide de style est que tu n’as peut-être aucune idée de l’espacement Hn à adopter entre les headings. C’est là que tu fais appel à type-scale.com. Dis désormais adieu aux calculs d’espacement manuel. Sur la plateforme, tu as directement accès à un nombre de pixels proposés automatiquement, un ratio qui te permet un bel espacement.

Il y a une vidéo Youtube dans laquelle je décris cela en bas de l'article. Soutenez-moi en vous abonnant à la chaine YouTube "Happy Desk Design"

espacement Hn
Photo by Clark Street on Unsplash

Conclusion
Les détails font toute la différence ! Eh oui, l’espacement Hn fait partie de ces détails-là. C’est pourquoi il faut accorder beaucoup d’importances à leur calcul. Heureusement pour vous, il existe désormais un outil qui permet de le faire automatiquement et surtout, gratuitement !

YouTube : Espacement Heading (H1, H2, H3...) calculé pour toi ! (2020)

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be
Kevin Palombo, Gérant de Happydesk

Hello 👋

Je suis en mission pour ton Web Succès! Qui je suis?

Tu veux apprendre?

Un café? Mais oui, prends ton temps!

10/8/2020

Comment choisir un nom de domaine ?

Quel que soit le nom que tu choisiras pour ton site, il évoquera toujours une image chez ton interlocuteur. D'où l’intérêt de bien choisir un nom de domaine

Ça m'intéresse
5/8/2020

Comment gérer les délais d’un site web ?

Si comme moi, tu n'as pas su gérer les délais d'un site web, cet article qui relate mes erreurs et la manière dont j'y ai fait face t'intéressera sûrement.

Ça m'intéresse
3/8/2020

Où trouver de l’inspiration en 2020 pour ton projet web ?

Tu as épuisé toutes tes inspirations, et tu cherches actuellement un moyen de trouver de l'inspiration en 2020 pour tes projets web ?

Ça m'intéresse

Je veux...

Happy.business

Parce que toute histoire commence par une rencontre. Prenons contact, une vraie personne se cache derrière Happydesk et sera ravie d’écouter ce que vous avez à lui raconter !

Prendre un rendez-vous

Happy.webnews

Parce que nous mettons toutes nos connaissances du monde Digital à disposition de notre Communauté pour les accompagner dans leur quête du Web Succès.

Lire le blog

Happy.webevent

Parce que se sentir moins seul renforce notre essence de leader. Happydesk organise des Events entre Entrepreneurs plus que motivés à se dépasser et atteindre des objectifs jamais espérés.

Assister aux events

Tu veux favoriser ta réussite?

OUI, ça m'intéresse !