Como criar um link para ir para uma parte específica de uma página

Quando a maioria das pessoas pensa em hiperlinks, eles pensam em conectar duas páginas da web diferentes – como um blog e uma página de destino – juntas. Mas isso não é tudo que os hiperlinks podem fazer, eles também podem vincular a uma parte específica de uma página.

Então, lembra-se daquele glossário realmente exaustivo que você montou sobre os termos do setor que seu público deveria conhecer? Agora, quando você se referir a algo que disse em outro lugar naquele artigo, você pode realmente criar um link para isso – tornando muito mais fácil para o seu público descobrir do que diabos você está falando. Quer ver o que quero dizer? Basta clicar aqui.

Muito legal, certo? A melhor parte disso tudo é que é superfácil de fazer você mesmo, mesmo que você não tenha amplo conhecimento de HTML. Se a linguagem HTML parecer confusa, siga os exemplos do mundo real abaixo.

Observação: se você for um cliente da HubSpot, siga estas instruções.

O que é um hiperlink HTML?

Um hiperlink é um link clicável que pode ser anexado a qualquer elemento HTML em uma página da Web, como uma imagem ou texto. Esses links podem ser usados ​​para direcionar os usuários para outras páginas do seu site, sites externos ou até partes específicas de uma página da web.

Os hiperlinks são criados usando o código HTML, que é a linguagem usada para estruturar seu site. A utilização estratégica de hiperlinks pode ajudá-lo a melhorar a experiência do usuário em seu site, orientando os usuários através de seu conteúdo e ajudando-os a descobrir informações relacionadas.

O que é um link âncora HTML?

Também conhecido como link de salto, um link de âncora HTML é o link que leva você a uma parte específica de uma página da web. Os links âncora são especialmente úteis para guiar os usuários por uma página longa. Por exemplo, você pode criar um sumário na parte superior de sua página usando links de âncora que levam a diferentes seções de sua postagem no blog, tornando mais fácil para os usuários encontrarem as informações exatas que procuram.

É uma prática recomendada criar um link externo ao citar informações de outra fonte. Isso não apenas dá crédito a quem merece, mas também ajuda os usuários a encontrar mais informações sobre o assunto sobre o qual estão lendo.

Permitir que as pessoas “pulem” efetivamente para uma determinada parte de uma página da Web pode ajudar sua empresa a crescer melhor e tornar seu conteúdo mais conveniente para os visitantes do site – mas você deve garantir que está fazendo tudo certo. Veja como adicionar links de salto ao seu conteúdo, passo a passo.

1. Dê um nome ao objeto ou texto ao qual deseja vincular.

Em um cenário de vinculação normal, tudo o que você precisa vincular tem um URL próprio. No entanto, neste cenário, você não está vinculando a uma nova página com seu próprio URL — portanto, é necessário criar um nome para o destino do link.

Eu recomendo usar uma palavra ou frase que descreva o destino do link. Se você usar uma frase, use sublinhados entre cada palavra em vez de espaços, caso contrário, o código não funcionará.

Exemplo

Digamos que queremos criar um link para o exemplo de uma empresa que usa anúncios do Facebook em uma postagem. Aqui está o que eu usaria como nome do meu objeto:

facebook_ads_example

Agora, para a próxima etapa.

2. Pegue o nome que você escolheu e insira-o em uma marca de link de âncora HTML de abertura.

Em outras palavras, substitua a seção vermelha da tag abaixo pelo nome que você escolheu na etapa anterior:

INSERT_YOUR_OBJECT_NAME_HERE“>

 
<a id="https://blog.hubspot.com/marketing/facebook_ads_example">

3. Coloque a tag de abertura completa acima antes do texto ou objeto ao qual você deseja vincular e adicione uma tag de fechamento depois.

Fazer isso define a localização do link. É assim que seu código deve ficar agora:

O objeto ao qual você deseja vincular.

Exemplo

 
<a id="facebook_ads_example">This is the Facebook ad example I want to link to.</a>

4. Crie o hiperlink que o levará a esse texto ou objeto.

Agora, vá para a parte da postagem em que você gostaria de colocar o hiperlink. Você precisará adicionar um atributo href típico, que indica o destino do hiperlink. No entanto, na parte em que você normalmente incluiria um URL, você incluirá o símbolo de sustenido (#) e o nome do objeto ao qual está vinculando. Aqui está o que parece:

<a href=”https://blog.hubspot.com/marketing/#INSERT_YOUR_OBJECT_NAME_HERE“>Clique aqui para ver o conteúdo abaixo.a>

Exemplo

 
<a rel="noopener" target="_blank" href="https://blog.hubspot.com/marketing/#facebook_ads_example">Click here to see an example of how a company uses Facebook ads.</a>

E então está tudo pronto – você tem um hiperlink funcionando entre duas partes do conteúdo na mesma página. Simples assim.

Por que criar links âncora para pular para uma parte específica da página?

Embora a criação de links âncora adicione mais algumas etapas ao seu processo antes de publicar uma postagem no blog, ela pode causar um grande impacto na experiência do usuário.

Os links de âncora podem ser usados ​​para criar recursos como índice, que podem aprimorar a organização de longas postagens de blog.

A criação de links que levam você a uma parte específica da página facilita muito a navegação do usuário pelo seu conteúdo e a localização das informações que ele procura. Sem o auxílio de links âncora, os usuários podem acabar rolando a página por muito tempo, o que pode levá-los a pular.

Em última análise, seus clientes apreciarão o conteúdo fácil de ler e podem ser mais propensos a revisitar seu site ou fazer uma compra por causa disso.

Crie links de âncora com facilidade

Criar um link para uma parte específica de uma página é uma maneira simples de tornar seu conteúdo mais voltado para o usuário. Em apenas algumas etapas curtas, você pode criar links de âncora que tornam a navegação em postagens longas do blog muito fácil.

(Olá, pessoal curioso da introdução! Clique aqui para voltar de onde parou.)

Nota do editor: esta postagem foi publicada originalmente em julho de 2022 e foi atualizada para atualização, precisão e abrangência.