Links e navegação

docs.scrimba.com

Uma página isolada é uma ilha. Links são o que une páginas em uma web: eles permitem que um visitante se mova para outra página, pule para uma seção mais abaixo ou abra um aplicativo de email para escrever para você. O elemento por trás de tudo isso é o anchor (âncora), <a>, e ele funciona com um atributo chamado href. Se as palavras element e attribute são novas, o capítulo What is HTML as apresenta.

O elemento anchor

Um link é feito com o elemento anchor, escrito <a>. Você dá a ele um atributo href, que é para onde o link vai, e o texto entre as tags de abertura e fechamento é o que o visitante vê e clica.

<a href="https://scrimba.com">Visite o Scrimba</a>

As palavras "Visite o Scrimba" aparecem como um link clicável. Clique nelas e o navegador carrega o endereço no href.

Pense em href como o destino escrito em uma placa de sinalização, e o texto do link como o rótulo pintado na placa. O rótulo é o que as pessoas leem; o destino é para onde a seta aponta.

O elemento anchor <a> marca um conteúdo como um link, e seu atributo href (abreviação de hypertext reference) contém o destino. O conteúdo entre as tags é o rótulo do link, a parte clicável.

<a href="https://scrimba.com/courses">Explore os cursos</a>

<a> é um elemento inline, então ele fica dentro de uma linha de texto como uma palavra faz, em vez de começar um novo bloco. É por isso que você pode adicionar um link no meio de um parágrafo sem quebrar a linha.

Você não está limitado a envolver texto. Um anchor pode envolver uma imagem ou um bloco inteiro de conteúdo, e tudo fica clicável:

<a href="/courses/html">
  <img src="html-course.jpg" alt="O curso de HTML">
  <span>Comece o curso de HTML</span>
</a>

O elemento anchor <a> se torna um link apenas quando carrega um atributo href. Sem ele, é apenas um placeholder que o navegador não trata como um link. O rótulo, o texto entre as tags, é a parte que mais importa para pessoas que não leem a página de cima para baixo.

Um screen reader (software que lê uma página em voz alta para pessoas que não conseguem vê-la) pode listar todos os links de uma página para que seu usuário os revise fora de contexto. Nessa lista, "clique aqui" e "leia mais" aparecem sem nada para diferenciá-los, então o texto do link deve fazer sentido por conta própria, fora de contexto. Escreva-o para descrever o destino: "Leia a política de reembolso", não "clique aqui".

Os motores de busca leem o mesmo sinal. As palavras dentro de um link, o texto anchor, dizem a um crawler (o programa que um mecanismo de busca usa para ler páginas) do que se trata a página vinculada, então um rótulo descritivo ajuda a página que você vincula bem como a sua.

JunoO elemento anchor Um anchor é <a href="...">: o href é para onde vai, o texto entre as tags é o que as pessoas clicam. Esse é o elemento inteiro. Com essas duas partes você consegue criar links em qualquer lugar da web.

JunoO elemento anchor<a> mais um href faz um link, e é inline então cabe direto em uma frase. Você pode envolver mais que texto, uma imagem ou um bloco inteiro funciona. O rótulo é a parte clicável, o href é o destino.

JunoO elemento anchor O rótulo é a parte que viaja: screen readers e motores de busca leem fora de contexto, então clique aqui não diz nada para eles. Descreva o destino no texto. E um <a> sem href não é um link, só marcação.

URLs absolutes e relativas

Todo link precisa de um endereço para apontar, e existem dois tipos. Uma URL absoluta é o endereço completo, começando com https://, o mesmo que você digitaria na barra de endereços. Use-a para criar links para outro site:

<a href="https://scrimba.com">Página inicial do Scrimba</a>

Uma URL relativa é um atalho para outra página no seu próprio site. Em vez do endereço completo, você fornece o caminho de onde você está agora:

<a href="about.html">Sobre nós</a>

Esse link procura por um arquivo about.html na mesma pasta da página atual. Uma URL absoluta é um endereço postal completo com país e cidade; uma URL relativa é "duas portas daqui".

URLs absolutas carregam o endereço inteiro, incluindo o protocolo (https) e o domínio. URLs relativas são resolvidas em relação ao endereço da página atual, então descrevem um caminho e não uma localização completa:

<a href="/blog/getting-started">Começando</a>     <!-- da raiz do site -->
<a href="getting-started">Começando</a>          <!-- da pasta atual -->
<a href="../index.html">Voltar para o início</a>  <!-- subir um nível -->

Uma barra à esquerda / a torna root-relative: começa na raiz do site, então aponta para o mesmo lugar não importa de qual página você faz o link. Sem a barra significa "relativo à pasta da página atual", e ../ sobe um nível.

href também funciona com endereços que não são páginas web. mailto: abre o aplicativo de email do visitante com uma nova mensagem, e tel: em um telefone inicia uma chamada:

<a href="mailto:[email protected]">Envie um email</a>
<a href="tel:+5585999999999">Ligue para o suporte</a>

Cada URL relativa é resolvida contra uma URL base, que por padrão é o endereço da página atual. Então o mesmo href pode resolver para lugares diferentes dependendo de onde a página está, e é por isso que os três formulários se comportam diferentemente:

• Root-relative, um caminho começando com / (/blog/post): resolvido a partir da raiz do domínio, então aponta para o mesmo lugar em cada página do site.
• Document-relative, sem barra à esquerda (post, ../post): resolvido a partir da pasta da página atual, e quebra no momento em que você move a página.
• Completamente absoluto (https://example.com/blog/post): nomeia o protocolo e o domínio explicitamente, necessário para outros sites e desnecessariamente frágil para o seu.

Prefira links root-relative para qualquer coisa no seu próprio site. Eles sobrevivem à reestruturação de pastas e permitem que você mova um site inteiro entre um servidor de teste e produção sem reescrever um único link, porque nunca hard-code o domínio. Mantenha URLs completamente absolutas para destinos externos, onde você não tem escolha.

Uma observação sobre mailto: e tel:: são valores href ordinários, então seguem as mesmas regras de anchor, mas entregam controle a outro aplicativo (um cliente de email ou o discador telefônico) e se comportam diferentemente em cada dispositivo. Útil como uma conveniência, nunca como sua única forma de ser contatado.

JunoURLs absolutes e relativas Dois tipos de endereço: uma URL absoluta é a https://... completa para outros sites, uma relativa como about.html é um atalho para uma página sua. Endereço postal completo versus "duas portas daqui". Comece com links relativos para suas próprias páginas e você digitará bem menos.

JunoURLs absolutes e relativas URLs relativas são resolvidas em relação à página atual, então uma barra à esquerda / significa "da raiz do site" e ../ significa "subir uma pasta". href também aceita mailto: e tel:, que entregam ao aplicativo de email ou ao discador. Root-relative é o padrão seguro para links dentro do seu próprio site.

JunoURLs absolutes e relativas Cada URL relativa é resolvida em relação ao endereço da página atual, é por isso que links root-relative (/blog/post) sobrevivem a mudanças de pasta e relativos a documentos não. Mantenha URLs completamente absolutas para os sites de outras pessoas. E como mailto: e tel: dependem do dispositivo do visitante, nunca faça deles sua única forma de ser contatado.

Destinos de links, rel e abrindo em novas abas

Por padrão, clicar em um link carrega a nova página na mesma aba, substituindo a página em que você estava. Às vezes você quer que abra em uma nova aba, para que o visitante mantenha sua página aberta. Você faz isso com o atributo target definido como _blank:

<a href="https://scrimba.com" target="_blank">Abra o Scrimba em uma nova aba</a>

_blank significa "uma aba nova e em branco". Abrir um link normalmente é passar por uma porta para a próxima sala; target="_blank" abre uma segunda porta para que a primeira sala permaneça onde estava.

target="_blank" abre o link em um novo contexto de navegação, uma nova aba ou janela, para que o visitante não perca seu lugar na sua página. Vem com uma ressalva que vale a pena incorporar em um hábito: emparelhe-a com rel="noopener".

<a href="https://example.com" target="_blank" rel="noopener">
  Recurso externo
</a>

Sem noopener, a página que você abre consegue uma referência de volta para a sua através de JavaScript e pode interferir nela. rel="noopener" corta essa conexão. Navegadores modernos agora fazem isso automaticamente para target="_blank", mas escrever você mesmo é explícito e permanece seguro em navegadores mais antigos.

Abra em uma nova aba apenas para links que saem do seu site. Abrir links do site em novas abas surpreende as pessoas e quebra o botão voltar, então reserve target="_blank" para links indo para outro lugar, e use-o deliberadamente mesmo assim.

O atributo rel (abreviação de relationship) descreve como a página vinculada se relaciona com a sua, e alguns de seus valores fazem trabalho real. Cada um resolve um problema específico:

• noopener: impede que a nova página obtenha uma referência de JavaScript de volta para a sua através de window.opener, que ela poderia usar para redirecionar sua aba para uma página falsa. Sempre emparelhe com target="_blank". Navegadores agora implicam isso, mas declarar protege os mais antigos.
• noreferrer: também remove o referrer (o header que diz ao destino de qual página o visitante veio), então o site alvo não consegue ver que o clique veio de você. Também implica noopener. Use quando não quiser revelar onde o link está.
• nofollow: diz aos motores de busca para não passar crédito de ranking para a página vinculada. Use em links que você não recomenda, como conteúdo enviado por usuários ou comentários.
• sponsored: marca um link pago ou de afiliado, para que motores de busca saibam que o link foi colocado por pagamento. Usar isso mantém você dentro de suas diretrizes para links pagos.

Você pode combiná-los em uma lista separada por espaço, rel="noopener noreferrer", e o navegador aplica cada um.

JunoDestinos de links, rel e abrindo em novas abastarget="_blank" abre um link em uma aba nova para que sua página permaneça. Deixe de fora e o link abre na mesma aba, que é o que as pessoas esperam na maioria das vezes. Reserve a nova aba para links indo para outros sites.

JunoDestinos de links, rel e abrindo em novas abastarget="_blank" abre uma nova aba, e você a emparelha com rel="noopener" para que a nova página não consiga chegar de volta para a sua. Navegadores fazem isso na maioria das vezes agora, mas escrever permanece seguro em mais antigos. Não abra novas abas para suas próprias páginas: quebra o botão voltar e surpreende as pessoas.

JunoDestinos de links, rel e abrindo em novas abasrel é uma caixinha de ferramentas: noopener corta o link de JavaScript de volta para sua aba, noreferrer também esconde de onde o clique veio, nofollow retém crédito de ranking, sponsored marca links pagos. Combine com um espaço, como noopener noreferrer. Use cada um quando seu problema aparecer, não por padrão.

Links na página com IDs de fragmento

Links não vão apenas para outras páginas. Eles também podem pular para um ponto mais abaixo da página atual, da forma que um índice faz. Primeiro, dê o ponto que você quer alcançar, por exemplo um heading, um atributo id único:

<h2 id="pricing">Preços</h2>

Depois faça um link para ele colocando um # na frente desse nome:

<a href="#pricing">Vá para preços</a>

Clicar no link rola a página para baixo até o heading de preços. A parte #name é chamada de fragmento. O id é um marcador que você coloca na página, e o link # é você indo direto para ele.

Um id dá a um elemento um nome único, e um link cujo href começa com # aponta para o elemento com esse id na página atual:

<a href="#contact">Contato</a>
...
<section id="contact">
  <h2>Entre em contato</h2>
</section>

O valor depois de # é o identificador de fragmento. Duas regras o tornam funcionar: um id deve ser único na página, e o fragmento do link deve corresponder exatamente, incluindo capitalização.

Você também pode criar um link para um fragmento em outra página, adicionando-o depois da URL:

<a href="/help#refunds">Política de reembolso</a>

Isso carrega a página de ajuda e rola direto para o elemento com id="refunds". Um # vazio ou #top em um href salta de volta para o topo da página.

Um link de fragmento (um href começando com #) move a página para o elemento cujo id corresponde, e também move o foco do teclado para lá quando o alvo pode receber foco. Esse comportamento é a base de um skip link: um link, geralmente a primeira coisa na página, que permite que um usuário de teclado ou screen reader pule a navegação repetida direto para o conteúdo principal.

<body>
  <a href="#main" class="skip-link">Vá para o conteúdo principal</a>
  <nav>...</nav>
  <main id="main">
    ...
  </main>
</body>

Sem ele, alguém navegando pelo teclado tem que abrir uma aba através de cada link de navegação em cada página antes de chegar ao conteúdo. O skip link normalmente fica oculto até receber foco, então aparece, para permanecer fora do caminho para usuários de mouse enquanto sendo a primeira parada para usuários de teclado.

Dois detalhes decidem se funciona. O alvo (<main id="main"> aqui) deve ser o recipiente de conteúdo real, e dar a esse recipiente tabindex="-1" garante que o foco chegue lá em cada navegador (tabindex="-1" significa "focável por script mas não parte da ordem de abas normal"). Teste pressionando Tab no momento em que a página carrega: a primeira coisa focada deve ser o skip link.

JunoLinks na página com IDs de fragmento Dê um ponto um id, depois crie um link para ele com # e esse mesmo nome, como <a href="#pricing">. A página rola direto para lá. Pense no id como um marcador e no link # como ir direto para ele.

JunoLinks na página com IDs de fragmento Um #name em um href pula para o elemento com esse id. O id tem que ser único na página e corresponder ao fragmento exatamente, capitalização e tudo. Adicione #name depois de uma URL para chegar em um ponto em outra página.

JunoLinks na página com IDs de fragmento Links de fragmento movem o foco, não apenas a posição de scroll, que é o que faz um skip link funcionar: um primeiro-na-página <a href="#main"> deixa usuários de teclado pular a nav. Aponte-o para seu recipiente de conteúdo real e dê a ele tabindex="-1" para que o foco chegue lá em todos os lugares. Pressione Tab em um carregamento de página novo para verificar.

Construindo uma navegação

A maioria dos sites tem uma linha de links no topo: Início, Sobre, Contato. Essa é uma navegação, e é um conjunto de anchors agrupados juntos. HTML tem um elemento feito para isso, <nav>, que marca um bloco como a navegação da página:

<nav>
  <a href="/">Início</a>
  <a href="/about">Sobre</a>
  <a href="/contact">Contato</a>
</nav>

Cada link é um anchor ordinário. Envolvê-los em <nav> diz ao navegador e outras ferramentas "este grupo é como você se move pelo site".

Uma navegação é uma lista de links, e a forma idiomática de construí-la diz exatamente isso: uma lista desordenada dentro de um <nav>.

<nav>
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/courses">Cursos</a></li>
    <li><a href="/pricing">Preços</a></li>
  </ul>
</nav>

Por que a lista? Um screen reader anuncia "lista, três itens", então seu usuário sabe quantos links esperar antes de abrir cada um. O elemento <nav> é um landmark: ferramentas assistivas permitem que usuários pulem direto para ele, da forma que o skip link pula para o conteúdo principal. Use nav para blocos de navegação principais, não para cada grupo de links.

Um <nav> é uma região landmark (uma área rotulada da página que ferramentas assistivas podem listar e pular para), e a navegação principal de uma página fica em um. Quando um site tem mais de uma nav, o menu primário e um conjunto de links de rodapé, por exemplo, dê a cada um um rótulo com aria-label para que sejam diferenciados:

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/courses" aria-current="page">Cursos</a></li>
    <li><a href="/pricing">Preços</a></li>
  </ul>
</nav>

O atributo que merece seu lugar aqui é aria-current. Defina aria-current="page" no link que aponta para a página em que o visitante já está. Visualmente você pode mostrar a página atual destacando seu link; aria-current="page" diz a mesma coisa a um screen reader, que então anuncia o link como "página atual". Sem isso, um link destacado parece ativo para usuários que veem, mas é indistinguível dos outros para qualquer pessoa que não consegue ver a cor.

Mantenha a marcação honesta: o link para a página atual permanece um anchor real, então o comportamento do teclado é consistente, e aria-current carrega o significado "você está aqui" em vez de apenas cor.

JunoConstruindo uma navegação Uma navegação é um grupo de links envolvido em <nav>, como Início, Sobre, Contato. O <nav> diz a tudo "é assim que você se move". Os links dentro são anchors simples, nada novo para aprender.

JunoConstruindo uma navegação Construa uma nav como uma <ul> de links dentro de <nav>: a lista diz a um screen reader quantos links estão vindo, e <nav> é um landmark que as pessoas podem pular. Reserve-a para os menus reais, a barra superior e o rodapé, não cada aglomerado de links.

JunoConstruindo uma navegação<nav> é um landmark, então rotule cada um com aria-label quando uma página tem mais de um. Marque a página atual do visitante com aria-current="page": é assim que um screen reader aprende o que uma cor de destaque mostra a usuários que veem. Mantenha o link atual um anchor real para que o comportamento do teclado permaneça consistente.