Generador de paginación en HTML y CSS
Indica el total de páginas, la actual y el formato de la dirección. La vista previa muestra la paginación tal como queda y el código sale listo.
Cómo usarPáginas 1, 2, 3 … sin plugin
Disponible en: 
Generador de paginación en HTML y CSS: para qué sirve
Crea la paginación del blog, de la tienda o de la lista de resultados: indica el total de páginas, la actual, cuántas vecinas mostrar y el formato de la dirección, como /blog/pagina/{n} o ?page={n}. Elige entre los estilos cuadrado, redondo y minimalista y el color de énfasis.
El código usa nav con aria-label, aria-current="page" en la página actual y enlaces a href reales, que Google puede seguir para encontrar los elementos de las páginas siguientes. Cada número tiene un área táctil de 44 px, y en el celular los textos de anterior y siguiente se reducen a solo las flechas.
Cómo usar
- Indica el total de páginas y la actual.
- Elige la dirección, el estilo y el color.
- Copia el código a tu sitio.
Cuándo usar
- Blog con muchas publicaciones.
- Lista de productos de la tienda.
- Resultados de búsqueda.
Preguntas frecuentes
¿Por qué usar enlaces y no botones?
Cada página de la lista debe tener su propia dirección, como /blog/pagina/2 o ?page=2, en un enlace a href común. Así Google puede seguir los enlaces y encontrar los elementos de las páginas siguientes, y la persona puede abrir una página en otra pestaña o compartir la dirección.
¿Cómo funcionan los puntos suspensivos?
Con muchas páginas, la paginación muestra la primera, la última y algunas vecinas de la actual, y coloca … en lugar de las que quedan fuera. Tú eliges cuántas vecinas aparecen a cada lado.
¿Debo poner rel="prev" y rel="next"?
No para Google, que dejó de usar esas marcas en 2019. No estorban y otros sistemas todavía pueden leerlas, así que la herramienta agrega rel en los enlaces de anterior y siguiente.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.