Générateur de pagination en HTML et CSS

Générateur de pagination en HTML et CSS: à quoi ça sert

Créez la pagination du blog, de la boutique ou de la liste de résultats : indiquez le nombre total de pages, la page actuelle, combien de voisines afficher et le format de l’adresse, comme /blog/page/{n} ou ?page={n}. Choisissez parmi les styles carré, rond et minimaliste et la couleur d’accent.

Le code utilise nav avec aria-label, aria-current="page" sur la page actuelle et de vrais liens a href, que Google peut suivre pour trouver les éléments des pages suivantes. Chaque numéro a une zone tactile de 44 px, et sur mobile les textes précédent et suivant se réduisent aux seules flèches.

Mode d’emploi

1. Indiquez le nombre total de pages et la page actuelle.
2. Choisissez l’adresse, le style et la couleur.
3. Copiez le code dans le site.

Quand l’utiliser

• Blog avec beaucoup d’articles.
• Liste de produits de la boutique.
• Résultats de recherche.

Questions fréquentes

Pourquoi utiliser des liens et non des boutons ?

Chaque page de la liste doit avoir sa propre adresse, comme /blog/page/2 ou ?page=2, dans un lien a href ordinaire. Ainsi, Google peut suivre les liens et trouver les éléments des pages suivantes, et la personne peut ouvrir une page dans un autre onglet ou partager l’adresse.

Comment fonctionnent les points de suspension ?

Avec beaucoup de pages, la pagination affiche la première, la dernière et quelques voisines de la page actuelle, et place … à la place de celles qui sont omises. Vous choisissez combien de voisines apparaissent de chaque côté.

Dois-je ajouter rel="prev" et rel="next" ?

Pas pour Google, qui a cessé d’utiliser ces balises en 2019. Elles ne gênent pas et d’autres systèmes peuvent encore les lire ; l’outil place donc rel sur les liens précédent et suivant.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires