Link para seção da página: confira âncora e destino

Para conferir um link que leva a uma seção, compare o texto clicável, o fragmento do endereço e o identificador do trecho de chegada. Depois, acione a ligação na página publicada e leia o conteúdo encontrado. Abrir a página certa ainda não demonstra que o leitor chegou à seção anunciada.

O guia prático de SEO reúne conteúdo e funcionamento. Aqui, aprofundamos uma tarefa de navegação: criar e revisar um atalho para um ponto específico do texto. Há um exercício no próprio artigo e um registro que você pode adaptar à revisão do site.

Separe o texto clicável do identificador da seção

Na revisão editorial, âncora costuma designar o texto do link. No editor de páginas, âncora HTML também pode nomear o identificador de um trecho. Para evitar pedidos ambíguos, registre os dois: o que a pessoa lê antes de clicar e o código que identifica o destino dentro do documento.

O fragmento é a parte do endereço iniciada por #. A referência de fragmentos da MDN explica que ele pode identificar uma seção e ser associado ao atributo id de um elemento HTML. Nessa navegação, o navegador procura o ponto correspondente depois de obter a página.

Assim, um texto como Ir à lista fictícia de materiais pode apontar para #l036-materiais. O trecho de chegada precisa ter esse identificador e apresentar a lista anunciada. O nome visível da seção e seu id cumprem funções diferentes; não precisam ser a mesma frase.

Prepare um destino único e estável

A referência do atributo id na MDN determina que o identificador seja único no documento e não contenha espaços ASCII. Para uma convenção editorial simples, podemos adotar palavras curtas separadas por hífens, como no exercício. Essa convenção facilita a manutenção, sem resumir todas as possibilidades da linguagem.

Se o editor oferece um campo de âncora HTML no bloco de título, confira como o valor é salvo e emitido na publicação. Quando esse campo não estiver disponível, peça à pessoa responsável que identifique o elemento e seu id. Evite deduzir o identificador apenas pelo texto visível do subtítulo.

Ao reorganizar um artigo, preserve os identificadores úteis quando o conteúdo continuar com a mesma função. Mudar apenas a redação do título não exige necessariamente trocar seu id. Se o trecho for removido ou mudar de assunto, revise também os atalhos que o indicam.

Para avaliar a posição de uma subseção, consulte o roteiro de organização de H1, H2 e H3. Um identificador localiza o elemento; o nível do título mostra sua relação com o restante do texto. A presença de um não substitui a conferência do outro.

Exercício L036: seguir um atalho para materiais fictícios

Exemplo fictício L036: uma orientação de costura imaginária tem uma lista de materiais. O texto clicável abaixo leva à subseção de demonstração dentro deste artigo. Os materiais são apenas conteúdo didático; não há oficina, inscrição ou evento real.

Ir à lista fictícia de materiais. Depois de seguir o atalho, confira o título e os três itens descritos. A subseção também oferece um link de retorno a este ponto do exercício.

Exercício fictício L036

O esquema relaciona texto clicável, referência e trecho de chegada. Não é uma captura de interface.

Texto clicável na origem

Ir à lista fictícia de materiais

Referência e identificador

O link usa #l036-materiais. O elemento de chegada usa id l036-materiais, sem o sinal #.

Conteúdo anunciado

Lista fictícia de materiais: retalho de tecido, linha e agulha. O título e a lista devem ser reconhecíveis na chegada.

Conferência na página

Acione o atalho e leia a informação encontrada. A abertura da página não comprova sozinha o destino. Teclado e largura de tela precisam de teste próprio.

Descrição da figura

O esquema próprio do exercício fictício L036 tem dois lados. À esquerda, a origem reúne o texto clicável Ir à lista fictícia de materiais e a referência #l036-materiais. À direita, o trecho de chegada tem o identificador l036-materiais, sem o sinal #, e o conteúdo prometido: retalho de tecido, linha e agulha. Uma seta relaciona a referência ao trecho de chegada. A faixa inferior orienta conferir se o título e a lista anunciados aparecem depois de seguir o atalho, pois abrir a página não comprova sozinho a chegada correta. Os materiais são fictícios, sem oficina ou evento real, e a figura não reproduz uma interface. O esquema explica estrutura; navegação pública, teclado e larguras precisam de conferência própria. No celular, os componentes aparecem em HTML.

<a href="#l036-materiais">Ir à lista fictícia de materiais</a>

<h3 id="l036-materiais">
  Lista fictícia de materiais do exercício L036
</h3>

O fragmento usa #. O valor do id não inclui esse sinal.
O código nesta caixa é explicativo, sem criar outro destino.

Na referência, #l036-materiais indica o ponto desejado. No elemento de título, id=”l036-materiais” identifica esse ponto sem o sinal #. O código acima aparece como texto, para não acrescentar outro elemento com o mesmo identificador ao documento.

Agora compare com #l036-material, sem o s final. Essa referência é mostrada apenas como texto e não tem destino no exercício. A página pode continuar acessível mesmo quando o fragmento não encontra a seção pretendida. Por isso, conferir apenas que houve abertura não encerra o teste.

Lista fictícia de materiais do exercício L036

Lista fictícia: retalho de tecido, linha e agulha. Este é o trecho de chegada do teste L036. O objetivo é conferir a correspondência entre a indicação, o identificador e o conteúdo encontrado.

Retornar ao ponto do teste L036.

Escolha um texto que informe o que será encontrado

A explicação da W3C sobre propósito de links orienta que a finalidade seja compreensível pelo texto do link ou por ele em conjunto com seu contexto associado. Sempre que possível, uma indicação clara por si só ajuda quem percorre a lista de links ou navega pelo teclado.

No exercício, materiais distingue o destino de outras orientações possíveis. Em uma página real, evite usar o mesmo texto vago para atalhos que levam a conteúdos diferentes. O leitor precisa saber qual trecho responde à dúvida que tem naquele momento.

O roteiro de revisão de destinos e âncoras de um artigo aprofunda a escolha editorial. Um fragmento correto que chega a outro assunto ainda deixa uma divergência de promessa. Leia o trecho, além de conferir o endereço.

Teste a chegada na página publicada

Abra a versão pública e acione o link a partir do trecho de origem. Observe o endereço e confira se a seção anunciada aparece. Leia o título e a resposta disponível, em vez de tratar qualquer movimento de rolagem como confirmação do destino.

Teste também o acesso por teclado e a apresentação em tela pequena. Um cabeçalho fixo pode cobrir o título de chegada, embora o identificador exista. Registre a condição observada e peça um ajuste de apresentação no escopo adequado. Neste exercício, há um espaçamento de chegada restrito aos dois pontos da demonstração.

O fragmento não é enviado ao servidor como parte da requisição, conforme a referência da MDN. Portanto, uma resposta de página disponível não comprova que aquele identificador existe ou que o trecho cumpre a promessa. O teste precisa incluir o documento apresentado pelo navegador.

Confira a página de destino e registre mudanças

Para apontar a uma seção de outra página, use o endereço efetivo dessa página seguido do fragmento conferido. Se copiar apenas #l036-materiais para outro documento, a referência dependerá do contexto em que foi inserida. O guia de links relativos e absolutos explica a base usada para formar o endereço.

Depois de salvar uma alteração, confira a origem e a chegada novamente. Um título pode ter sido movido, um identificador pode ter sido removido ou um link antigo pode continuar apontando para a versão anterior. Registre o que mudou e quais atalhos foram efetivamente testados.

Página de origem e versão publicada:
Necessidade que o atalho atende:
Texto clicável e contexto:
Página de destino conferida:
Fragmento efetivamente inserido:
Elemento, identificador único e conteúdo de chegada:
Resultado do clique a partir da origem:
Título e resposta encontrados:
Teclado, largura de tela e cabeçalho fixo:
Alteração realizada e links afetados:
Nova conferência, responsável e evidência:
Limites e pendências:

Perguntas frequentes sobre link para seção da página

O texto do link precisa ser igual ao id?

Não. O texto explica a finalidade para o leitor; o id identifica um elemento. Eles precisam manter uma relação coerente com o conteúdo de chegada.

O sinal # entra no valor do id?

No exemplo, o endereço usa #l036-materiais e o id usa l036-materiais. O sinal faz parte da referência ao fragmento, não do valor escolhido para o identificador.

A página abrir comprova que o atalho funciona?

Não. Confira se o identificador corresponde ao trecho anunciado e se a chegada permite reconhecer e ler a informação pretendida.

Posso repetir o mesmo id em várias seções?

O identificador deve ser único no documento. Use valores diferentes para destinos diferentes e confira o que foi emitido na publicação.

Se a equipe precisa organizar os caminhos de leitura do acervo, converse conosco sobre conteúdo e navegação. Podemos ajudar a delimitar prioridades de revisão. Produção editorial, implementação e manutenção precisam de escopos e responsáveis claros.