Cole um artigo em HTML ou Markdown e receba um sumário aninhado com links de âncora, ids adicionados aos seus títulos e CSS de barra lateral fixa. No seu navegador.
Gerador de sumário
Este gerador lê os títulos do seu artigo, dá a cada um deles um id único e monta uma lista aninhada de links de salto que apontam para eles. Cole HTML ou Markdown, escolha quais níveis de título incluir e copie um bloco nav pronto, uma lista em Markdown ou o seu HTML com os ids de âncora já adicionados.
O que você cola e o que recebe
Entrada
Títulos lidos de
Saídas
HTML
Elementos <h1> a <h6>
HTML do nav, lista em Markdown, artigo com ids adicionados
Markdown
Linhas que começam com # até ######
HTML do nav, lista em Markdown
Ids existentes
id="..." ou {#custom-id}
Mantidos como estão
Títulos repetidos
O mesmo texto duas vezes
O segundo id ganha -1, depois -2
Guias longos são mais fáceis de percorrer e compartilhar quando o leitor consegue pular para uma seção. Os links também dão a cada parte da página o seu próprio endereço, então você pode mandar alguém direto para o parágrafo de que a pessoa precisa.
Como os ids de âncora são criados
O texto de cada título vai para minúsculas, a pontuação é removida e os espaços viram hífens, então Choose a layout vira choose-a-layout. Letras acentuadas e alfabetos não latinos são mantidos em vez de removidos.
Um id precisa ser único no documento e não pode conter espaços. Quando o mesmo texto de título aparece duas vezes, a segunda cópia ganha -1, a terceira -2, para que cada link tenha exatamente um destino.
As plataformas de Markdown criam os próprios ids de título, e as regras delas variam um pouco. Se você publica Markdown em um lugar que já adiciona ids, confira um link depois de publicar; para HTML que você controla, use a saída do artigo para que os ids batam exatamente.
Onde colocar o bloco do sumário
Coloque a lista do sumário depois da introdução, não antes, para que o leitor primeiro entenda do que trata a página. Em telas largas, uma barra lateral fixa a mantém ao alcance durante a rolagem.
Se o seu site tem um header fixo, um link de salto vai esconder o título embaixo dele. A propriedade scroll-margin-top adiciona espaço acima do destino quando o navegador rola até ele, o que resolve isso sem JavaScript.
Cole o seu artigo. A ferramenta detecta HTML quando encontra tags de título; caso contrário, lê os títulos em Markdown e ignora blocos de código cercados.
Escolha o nível de título mais alto e o mais baixo a incluir. A maioria dos artigos lista apenas H2 e H3.
Escolha uma lista com marcadores ou numerada e defina o rótulo que os leitores de tela anunciam para o nav.
Copie o bloco do sumário. Para entrada em HTML, copie também o artigo com os ids, para que cada link tenha o seu destino.
Mantenha os títulos curtos e específicos; eles viram tanto o texto do link quanto a âncora na barra de endereço.
Evite pular níveis (um H4 logo abaixo de um H2). A ferramenta o aninha mesmo assim, mas quem usa leitor de tela navega por nível de título.
Mudar um título muda o id dele, o que quebra links que as pessoas já compartilharam. Defina um id fixo se uma seção recebe links de outros lugares.
Não coloque o H1 da página na lista do sumário; o leitor já está no topo.
Perguntas frequentes
Como criar um sumário clicável em HTML?
Dê um id a cada título e depois crie um link para ele com uma cerquilha: <a href="#set-a-budget">Set a budget</a> pula para o elemento com id="set-a-budget". Envolva os links em um elemento nav com uma lista dentro. Esta ferramenta escreve tanto os ids quanto a lista.
Por que o meu link de salto para atrás do header?
Um header fixed ou sticky cobre o topo da janela, e o navegador rola o título até essa borda de cima. Adicione scroll-margin-top aos títulos, um pouco maior que a altura do header, e o título para logo abaixo dele.
Posso deixar o sumário fixo?
Sim. Coloque o nav em uma coluna lateral e dê a ele position: sticky com um valor de top. Ele rola normalmente até chegar a esse deslocamento e depois fica parado enquanto a coluna dele estiver na tela. O exemplo abaixo mostra o CSS.
Um sumário ajuda no SEO?
Ele ajuda os leitores a encontrar as seções e dá a cada seção um endereço que pode receber links. Os buscadores às vezes mostram links de salto para seções, mas são eles que decidem quando; não existe configuração que garanta isso.
Barra lateral de sumário fixa
Um layout de duas colunas em que o sumário fica sempre à vista e os títulos ficam livres de um header fixo.
Nav fixo mais deslocamento dos títulos
O quadro é baixo, então role dentro dele: a coluna do sumário fica presa enquanto o artigo se move.
Gere um sumário
Cole um artigo em HTML ou Markdown. Os títulos são lidos, recebem ids de âncora únicos, são aninhados por nível e viram um nav em HTML, uma lista em Markdown e, para entrada em HTML, uma cópia do seu artigo com os ids que faltavam adicionados.
Sumário
Artigo (HTML ou Markdown)
Do nível
Até o nível
Rótulo do nav
Estilo da lista
Marcadores
Números
Lido como {format}: {n} título encontrado, {m} no intervalo.
Lido como {format}: {n} títulos encontrados, {m} no intervalo.
Nenhum título nesse intervalo. Amplie os níveis ou verifique se os títulos começam com # ou usam tags h.