Links

Na introdução aos atributos, compartilhamos um exemplo de como eles são adicionados à tag de abertura. O exemplo usou a tag <a>, mas nem o elemento nem os atributos específicos apresentados nesse exemplo foram discutidos.

A tag de abertura, os atributos e a tag de fechamento, rotulados em um elemento HTML.

A tag de âncora <a>, junto com o atributo href, cria um hiperlink. Os links são a base da Internet. A primeira página da Web tinha 25 links, com a seguinte mensagem: "Tudo o que existe on-line sobre o W3 está vinculado direta ou indiretamente a este documento". Provavelmente, tudo o que está on-line sobre a W3 também está vinculado direta ou indiretamente a este documento.

O poder da Web e da tag <a> cresceu muito desde que Tim Berners-Lee publicou essa primeira explicação em agosto de 1991. Os links representam uma conexão entre dois recursos, um dos quais é o documento atual. Os links podem ser criados por <a>, <area>, <form>, e <link>. Você aprendeu sobre <link> e vai descobrir os formulários em uma seção separada. Há também uma seção de aprendizado sobre formulários. Nesta sessão, você vai conhecer a tag <a> de uma letra, que não é tão simples assim.

O atributo href

Embora não seja obrigatório, o atributo href está presente em quase todas as tags <a>. Ao informar o endereço do hiperlink, o <a> se torna um link. O atributo href é usado para criar hiperlinks para locais na página atual, outras páginas em um site ou outros sites. Ele também pode ser codificado para baixar arquivos ou enviar um e-mail para um endereço específico, incluindo um assunto e conteúdo sugerido para o corpo do e-mail.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

O primeiro link inclui um URL absoluto, que pode ser usado em qualquer site do mundo para navegar até a página inicial do MLW. Os URLs absolutos incluem um protocolo, neste caso https://, e um nome de domínio. Quando o protocolo é escrito como //, ele é implícito e significa "use o mesmo protocolo que está sendo usado".

Os URLs relativos não incluem um protocolo ou nome de domínio. Eles são "relativos" ao arquivo atual. O MLW é um site de página única, mas esta série em HTML tem várias seções. Para vincular esta página à lição sobre atributos, um URL relativo é usado <a href="../attributes/">Attributes</a>.

O segundo link é apenas um identificador de fragmento de link e vai se vincular ao elemento com id="teachers",, se houver um, na página atual. Os navegadores também oferecem suporte a dois links "início da página": clicar em <a href="#top">Top</a> (sem diferenciação de maiúsculas e minúsculas) ou apenas <a href="#">Top</a> retorna o usuário ao início da página, a menos que haja um elemento com o ID top definido no mesmo caso de letras.

O MLW é um documento bastante longo. Para evitar a rolagem, adicione um link de volta ao topo na parte de baixo da seção #professores:

<a href="#top">Go to top.</a>

O terceiro link combina os dois valores: ele contém um URL absoluto seguido por um fragmento de link. Isso permite a vinculação direta a uma seção no URL definido, neste caso, a seção #teachers da página inicial do MLW. A página do MLW é carregada e o navegador rola até a seção de professores, sem enviar o fragmento na solicitação HTTP.

O atributo href pode começar com mailto: ou tel: para enviar e-mails ou fazer ligações. O processamento do link depende do dispositivo, do sistema operacional e dos aplicativos instalados.

O link mailto não precisa incluir um endereço de e-mail, mas pode, junto com o texto cc, bcc, subject e body para preencher o e-mail. Por padrão, um cliente de e-mail será aberto. Você pode pré-preencher o assunto e o corpo do e-mail sem um endereço de e-mail para permitir que os visitantes do site convidem os próprios amigos. No link, no rodapé do documento, incluímos o URL para o registro:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

O ponto de interrogação (?) separa o mailto: e o endereço de e-mail, se houver, do termo de consulta. Na consulta, os "e" comerciais (&) separam os campos, e os sinais de igual (=) equiparam cada nome de campo ao respectivo valor. Toda a string é codificada em porcentagem, o que é necessário se o valor href não estiver entre aspas ou se os valores incluírem aspas.

O app aberto quando o usuário clica, toca ou pressiona "Enter" em um link tel depende do sistema operacional, dos aplicativos instalados e das configurações do dispositivo. Um iPhone pode abrir o FaceTime, o app Telefone ou os contatos. Um computador Windows pode abrir o Skype, se ele estiver instalado.

Existem vários outros tipos de URLs, como blobs e URLs de dados. Consulte exemplos na discussão sobre o atributo download. Em sites seguros (servidos por https), é possível criar e executar protocolos específicos do app com registerProtocolHandler().

Ao incluir links que provavelmente vão abrir outros aplicativos instalados, é bom informar o usuário. Verifique se o texto entre as tags de abertura e fechamento informa ao usuário o tipo de link que ele está prestes a ativar. Os seletores de atributos CSS, como [href^="mailto:"], [href^="tel:"] e [href$=".pdf"], podem ser usados para segmentar estilos por tipo de aplicativo.

Recursos disponíveis para download

O atributo download precisa ser incluído quando o href aponta para um recurso para download. O valor do atributo "download" é o nome de arquivo sugerido para o recurso ser salvo no sistema de arquivos local do usuário. O SVGOMG, o otimizador de SVG, usa o atributo download para sugerir um nome de arquivo para o blob para download que o otimizador cria. Quando hal.svg é otimizado, a tag de abertura do link de download do SVGOMG é semelhante a:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

Há também uma demonstração de um <canvas> que cria um URL de dados PNG para download.

Para vincular a um recurso para download, inclua o URL do recurso como o valor do atributo href e um nome de arquivo sugerido para o usuário como o valor do atributo download.

Contexto de navegação

O atributo target permite definir o contexto de navegação para a navegação por links (e envio de formulários). As quatro palavras-chave sem diferenciação entre maiúsculas e minúsculas e com prefixo de sublinhado foram discutidas com o elemento <base>. Isso inclui:

  • (Padrão) _self: abre o link na janela atual.
  • _blank: abrir o link em uma nova guia.
  • _parent: abre o link no objeto pai ou iframe.
  • _top: abre o link no ancestral mais alto. Isso é especialmente útil se o link estiver aninhado em níveis profundos.

Se o link não estiver aninhado, _top e _parent vão agir da mesma forma que _self. O atributo target não se limita a esses quatro termos principais. Qualquer termo pode ser usado.

Cada contexto de navegação (ou cada guia do navegador) tem um nome. Os links podem ser abertos na guia atual, em uma nova guia sem nome ou em uma guia nomeada nova ou existente. Por padrão, o nome é a string vazia.

Para abrir um link em uma nova guia, o usuário pode clicar com o botão direito do mouse e selecionar "Abrir em uma nova guia". Os desenvolvedores podem forçar isso incluindo target="_blank".

Um link com target="_blank" abre uma nova guia com um nome nulo, abrindo uma nova guia sem nome a cada clique no link. Isso pode criar muitas guias novas. Muitas guias. Por exemplo, se o usuário clicar em <a href="registration.html" target="_blank">Register Now</a> 15 vezes, o formulário de inscrição será aberto em 15 guias separadas. Esse problema pode ser corrigido fornecendo um nome de contexto de guia. Ao incluir o targetatributo com um valor sensível a maiúsculas e minúsculas, como <a href="registration.html" target="reg">Register Now</a>, o primeiro clique vai abrir o formulário de inscrição em uma nova guia reg. Clique nesse link mais 15 vezes para recarregar o registro no contexto de navegação reg sem abrir outras guias.

O atributo rel controla os tipos de links que o link cria, definindo a relação entre o documento atual e o recurso vinculado no hiperlink. O valor do atributo precisa ser uma lista separada por espaços em um ou mais dos valores de pontuação do atributo rel compatíveis com a tag <a>.

A palavra-chave nofollow pode ser incluída se você não quiser que os rastreadores sigam o link. O valor external pode ser adicionado para indicar que o link direciona para um URL externo e não é uma página no domínio atual. A palavra-chave help indica que o hiperlink vai fornecer ajuda sensível ao contexto. Ao passar o cursor sobre um link com esse valor rel, um cursor de ajuda vai aparecer em vez do cursor de ponteiro normal. Não use esse valor apenas para receber o cursor de ajuda. Em vez disso, use a propriedade cursor do CSS. Os valores prev e next podem ser usados em links que apontam para o documento anterior e o próximo em uma série.

Assim como <link rel="alternative">, o significado de <a rel="alternative"> depende de outros atributos. As alternativas de feed RSS também incluem type="application/rss+xml" ou type="application/atom+xml, os formatos alternativos incluem o atributo type e as traduções incluem o atributo hreflang. Se o conteúdo entre as tags de abertura e fechamento estiver em um idioma diferente do principal do documento, inclua o atributo lang. Se o idioma do documento com hiperlink for diferente, inclua o atributo hreflang.

Neste exemplo, incluímos o URL da página traduzida como o valor de href, rel="alternate" para indicar que é uma versão alternativa de um site. O atributo hreflang fornece o idioma das traduções:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Se a tradução em francês for um PDF, você poderá fornecer o atributo "type" com o tipo MIME do PDF do recurso vinculado. Embora o tipo MIME seja apenas consultivo, informar ao usuário que um link vai abrir um documento de um formato diferente é sempre uma boa ideia.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Uma maneira de rastrear as interações do usuário é enviar um ping para um URL quando um link é clicado. O atributo ping, se presente, inclui uma lista separada por espaços de URLs seguros (que começam com https) que devem ser notificados ou enviados por ping se o usuário ativar o hiperlink. O navegador envia solicitações POST com o corpo PING para os URLs listados como o valor do atributo ping.

Dicas de experiência do usuário

  • Sempre considere a experiência do usuário ao escrever HTML. Os links precisam fornecer informações suficientes sobre o recurso vinculado para que o usuário saiba em que está clicando.
  • Em um bloco de texto, a aparência dos seus links precisa ser diferente o suficiente do texto ao redor para que os usuários possam identificar links de outros conteúdos com mais facilidade. Use vários indicadores visuais, como cor e sublinhado. Apenas a cor não é suficiente.
  • Sempre inclua estilos de foco. Isso ajuda os usuários que navegam pelo teclado a saber onde estão ao usar a tecla Tab no seu conteúdo.
  • O conteúdo entre a abertura <a> e o fechamento </a> é o nome acessível padrão do link e precisa informar ao usuário o destino ou a finalidade dele. Se o conteúdo de um link for uma imagem, a descrição alt será o nome acessível. O texto do link e o texto alt precisam ser mais descritivos do que "clique aqui" ou "mais informações". Em vez disso, ele deve oferecer ao usuário informações sobre para onde ele vai quando o link é ativado. Isso é fundamental para usuários de leitores de tela e resultados de mecanismos de pesquisa.
  • Não inclua conteúdo interativo, como um <button> ou <input>, dentro de um link. Não aninhe um link em um <button> ou <label>. Embora a página HTML ainda seja renderizada, aninhar elementos clicáveis e que podem receber foco dentro de elementos interativos cria uma experiência ruim para o usuário.
  • Se o atributo href estiver presente, pressionar a tecla Enter enquanto o elemento <a> estiver em foco vai ativá-lo.
  • Os links não se limitam a HTML. O elemento a também pode ser usado em um SVG, formando um link com os atributos "href" ou "xlink:href".

O atributo links retorna um HTMLCollection correspondente aos elementos a e area que têm um atributo href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

Nesta seção, você aprendeu tudo sobre links. A próxima seção aborda listas, que precisamos aprender para criar listas de links, também conhecidas como navegação.

Teste seu conhecimento

Teste seus conhecimentos sobre links.

O que o link nofollow faz?

Faz com que o link não seja clicável.
Tente novamente.
Pede para os rastreadores não seguirem o link.
Correto.
Torna sua visita ao site impossível de rastrear.
Tente novamente.

Quais links levam você ao topo da página?

#start
Tente novamente.
#
Correto.
#top
Correto.