English
EspañolGerador de paginação em HTML e CSS
Informe o total de páginas, a atual e o formato do endereço. A prévia mostra a paginação como ela fica e o código sai pronto.
Páginas 1, 2, 3 … sem plugin
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Gerador de paginação em HTML e CSS: para que serve
Crie a paginação do blog, da loja ou da lista de resultados: informe o total de páginas, a atual, quantas vizinhas mostrar e o formato do endereço, como /blog/pagina/{n} ou ?page={n}. Escolha entre os estilos quadrado, redondo e minimalista e a cor de destaque.
O código usa nav com aria-label, aria-current="page" na página atual e links a href de verdade, que o Google consegue seguir para achar os itens das páginas seguintes. Cada número tem área de toque de 44 px, e no celular os textos de anterior e próxima viram só as setas.
Como usar
- Informe o total de páginas e a atual.
- Escolha o endereço, o estilo e a cor.
- Copie o código para o site.
Quando usar
- Blog com muitos posts.
- Lista de produtos da loja.
- Resultados de busca.
Perguntas frequentes
Por que usar links e não botões?
Cada página da lista precisa ter um endereço próprio, como /blog/pagina/2 ou ?page=2, num link a href comum. Assim o Google consegue seguir os links e encontrar os itens das páginas seguintes, e a pessoa pode abrir uma página em outra aba ou compartilhar o endereço.
Como funcionam as reticências?
Com muitas páginas, a paginação mostra a primeira, a última e algumas vizinhas da atual, e coloca … no lugar das que ficam de fora. Você escolhe quantas vizinhas aparecem de cada lado.
Preciso colocar rel="prev" e rel="next"?
Não para o Google, que deixou de usar essas marcações em 2019. Elas não atrapalham e outros sistemas ainda podem ler, então a ferramenta coloca rel nos links de anterior e próxima.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.