Links

Na introdução à seção de atributos, mostramos um exemplo que mostra como os atributos são adicionados à tag de abertura. O exemplo usou a tag <a>, mas nem o elemento nem os atributos específicos introduzidos nele foram discutidos:

A tag âncora <a> e o atributo href criam um hiperlink. Os links são a espinha dorsal da Internet. A primeira página da Web continha 25 links, com a mensagem "Tudo o que há on-line sobre o W3 está vinculado direta ou indiretamente a este documento". É muito provável que tudo o que existe on-line sobre o W3 esteja vinculado direta ou indiretamente a este documento também!

O poder da Web e a tag <a> cresceram imensamente desde que Tim Berners-Lee publicou essa primeira explicação, em agosto de 1991. Os links representam uma conexão entre dois recursos, sendo um deles o documento atual. As vinculações podem ser criadas por <a>, <area>, <form> e <link>. Você aprendeu sobre o <link> e vai descobrir formulários em uma seção separada. Há também uma seção de aprendizado completa do formulário. Nesta sessão, você saberá mais sobre a tag <a> não tão simples e com uma única letra.

O atributo href

Embora não seja obrigatório, o atributo href é encontrado em quase todas as tags <a>. Fornecer o endereço do hiperlink é o que transforma o <a> em um link. O atributo href é usado para criar hiperlinks para locais na página atual, em outras páginas de um site ou em outros sites. Ele também pode ser codificado para fazer o download de arquivos ou enviar um e-mail a um endereço específico, incluindo um assunto e o conteúdo de corpo sugerido para o 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 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 simplesmente como //, ele é implícito e significa "usar o mesmo protocolo que está sendo usado no momento".

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

O segundo link é apenas um identificador de fragmento do link e será vinculado ao elemento com id="teachers",, se houver, na página atual. Os navegadores também oferecem suporte a dois links "parte de cima da página": clicar em <a href="#top">Top</a> (não diferencia maiúsculas de minúsculas) ou simplesmente <a href="#">Top</a> vai rolar o usuário até a parte de cima da página, a menos que haja um elemento com o ID top definido com a mesma letra maiúscula.

MLW é um documento bastante longo. Para poupar a rolagem, adicione um link de volta à parte superior da seção #teachers:

<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 vincular diretamente a uma seção no URL definido, neste caso, a seção #teachers da página inicial do MLW. A página do MLW será carregada. Em seguida, o navegador rolará 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 chamadas, com o tratamento do link dependendo do dispositivo, do sistema operacional e dos aplicativos instalados.

O link mailto não precisa incluir um endereço de e-mail, mas pode ser preenchido automaticamente, junto com cc, bcc, subject e body. Por padrão, um cliente de e-mail será aberto. É possível preencher automaticamente o assunto e o corpo do e-mail sem endereço de e-mail, para permitir que os visitantes do site convidem os próprios amigos. No nosso link, no rodapé do documento, incluímos o URL do 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 a mailto: e o endereço de e-mail, se houver, do termo de consulta. Dentro da consulta, "e" comercial (&) separam os campos, e os sinais de igual (=) equivalem a cada nome de campo ao respectivo valor. A string inteira é codificada por porcentagem, o que é definitivamente necessário se o valor href não estiver entre aspas ou se os valores incluírem aspas.

Qual 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 que o usuário tem no dispositivo. Um iPhone pode abrir o FaceTime, o app do smartphone ou os contatos. Uma área de trabalho do Windows pode abrir o Skype, se ele estiver instalado.

Há vários outros tipos de URLs, como blobs e URLs de dados. Veja exemplos na discussão sobre o atributo download. Para sites seguros (exibidos por https), é possível criar e executar protocolos específicos de apps com registerProtocolHandler().

Ao incluir links que provavelmente abrirão outros aplicativos instalados, é bom avisar 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. Seletores de atributos CSS, como [href^="mailto:"], [href^="tel:"] e [href$=".pdf"], podem ser usados para segmentar estilos por tipo de aplicativo.

Recursos para download

O atributo download precisa ser incluído quando o href apontar para um recurso para download. O valor do atributo de download é o nome de arquivo sugerido para o recurso a ser salvo no sistema de arquivos local do usuário. O SVGOMG, o otimizador SVG, usa o atributo download para sugerir um nome de arquivo para o blob para download criado pelo otimizador. Quando hal.svg é otimizado, a tag de abertura do link para 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 o nome de arquivo sugerido, que pode ser usado no sistema de arquivos do usuário como o valor do atributo download.

Contexto de navegação

O atributo target permite a definição do contexto para a navegação por links (e o envio de formulários). As quatro palavras-chave, que não diferenciam maiúsculas de minúsculas e têm prefixo de sublinhado, foram discutidas com o elemento <base>. Eles incluem o _self padrão, que é a janela atual, _blank, que abre o link em uma nova guia, _parent, que é o pai se o link atual estiver aninhado em um objeto ou iframe, e _top, que é o primeiro ancestral, especialmente útil se o link atual estiver profundamente aninhado. _top e _parent serão iguais a _self se o link não estiver aninhado. O atributo target não se limita a estes quatro termos-chave: qualquer termo pode ser usado.

Cada contexto de navegação (basicamente, cada guia do navegador) tem um nome. Os links podem abrir links na guia atual, em uma nova guia sem nome ou em uma guia nova ou já existente. Por padrão, o nome é uma 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 ao incluir target="_blank".

Um link com target="_blank" será aberto em uma nova guia com nome nulo, abrindo uma nova guia sem nome a cada clique em um link. Isso pode criar várias guias novas. Há guias demais. Por exemplo, se o usuário clicar em <a href="registration.html" target="_blank">Register Now</a> 15 vezes, o formulário de registro será aberto em 15 guias separadas. Esse problema pode ser corrigido fornecendo um nome de contexto de guia. Ao incluir o atributo target com um valor que diferencia maiúsculas de minúsculas, como <a href="registration.html" target="reg">Register Now</a>, o primeiro clique nesse link abre o formulário de registro em uma nova guia reg. Se você clicar neste link mais 15 vezes, o registro será atualizado no contexto de navegação reg, sem abrir nenhuma guia adicional.

O atributo rel controla os tipos de vínculo 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 score of rel aceitos pela tag <a>.

A palavra-chave nofollow pode ser incluída se você não quiser que os indexadores 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. Passar o cursor sobre um link com esse valor rel mostrará um cursor de ajuda em vez do cursor normal. Não use esse valor apenas para receber o cursor de ajuda. Use a propriedade cursor (link em inglês) do CSS. Os valores prev e next podem ser usados em links que direcionam para o documento anterior e o próximo de uma série.

Assim como no <link rel="alternative">, o significado de <a rel="alternative"> depende de outros atributos. As alternativas de feed RSS também vão incluir type="application/rss+xml" ou type="application/atom+xml, os formatos alternativos vão incluir o atributo type e as traduções vão incluir o atributo hreflang. Se o conteúdo entre as tags de abertura e fechamento estiver em um idioma diferente do idioma do documento principal, inclua o atributo lang. Se o idioma do documento com hiperlink estiver 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 do francês for um PDF, você poderá fornecer o atributo "type" com o tipo MIME em PDF do recurso vinculado. Embora o tipo MIME seja apenas para consulta, é sempre bom informar ao usuário que um link abrirá um documento em um formato diferente.

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

Acompanhamento de cliques em links

Uma maneira de acompanhar as interações dos usuários é dar um ping em um URL quando o link é clicado. O atributo ping, se presente, inclui uma lista separada por espaços de URLs seguros (que começam com https) que precisam ser notificados ou um ping se o usuário ativar o hyperlink. 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 no que está clicando.
• Dentro de um bloco de texto, a aparência dos links precisa ser diferente o suficiente do texto ao redor para que os usuários possam identificar facilmente links do restante do conteúdo, garantindo que somente a cor não seja o único meio de diferenciar o texto e o conteúdo ao redor.
• Sempre inclua estilos de foco. Isso permite que os navegadores do teclado saibam onde estão ao navegar pelo conteúdo.
• O conteúdo entre o <a> de abertura e o </a> de fechamento é o nome acessível padrão do link e precisa informar o usuário sobre o destino ou a finalidade do link. Se o conteúdo de um link for uma imagem, a descrição de alt será o nome acessível. Se o nome acessível vem do atributo alt ou de um subconjunto de palavras em um bloco de texto, confira se ele fornece informações sobre o destino do link. O texto do link deve ser mais descritivo do que "clique aqui" ou "mais informações". Isso é importante para os usuários do leitor de tela e para os resultados do seu mecanismo de pesquisa.
• Não inclua conteúdo interativo, como <button> ou <input>, dentro de um link. Não aninhe um link em <button> ou <label>. Embora a página HTML ainda seja renderizada, aninhar elementos focalizáveis e clicáveis dentro de elementos interativos cria uma experiência do usuário ruim.
• Se o atributo href estiver presente, pressione a tecla Enter enquanto o foco estiver no elemento <a> para 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".

Links e JavaScript

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 poder agrupá-las para criar listas de links (também conhecidas como navegação).

Teste seu conhecimento

Teste seus conhecimentos sobre links.