A tag a: mais que texto azul sublinhado

O atributo que faz uma tag a ser um link de verdade

<a href="/products">Products</a>

O href não é uma opção entre várias para o <a>: é o que torna a tag um hyperlink em primeiro lugar. Um <a> sem href não recebe foco pelo teclado nem ganha papel link na árvore de acessibilidade que os três últimos cursos conferiram nas DevTools. É texto inline com cara de link:

<!-- Não é de fato um link -->
<a>Products</a>

<!-- Um link de verdade -->
<a href="/products">Products</a>

Confira os dois no painel Accessibility das DevTools. O primeiro não tem papel, como um span; o segundo mostra role: link.

URLs relativas vs. absolutas

<a href="/products">Products</a>                              <!-- relativa à raiz deste site -->
<a href="products/blue-t-shirt">Blue T-Shirt</a>               <!-- relativa ao caminho atual -->
<a href="https://github.com/rails/rails">Rails on GitHub</a>   <!-- absoluta -->

URLs relativas (começando com / ou um caminho simples) se resolvem em relação à página e ao site atuais. Use-as para todo link dentro da sua app: funcionam igual em desenvolvimento, staging e produção. URLs absolutas são para destinos externos. O curso de Tags de metadados precisou delas em og:url e canonical, porque uma plataforma externa não tem "página atual" para resolver uma URL relativa.

No Rails, rotas nomeadas ganham de caminhos fixos

<%= link_to "Products", products_path %>
<%= link_to "Blue T-Shirt", product_path(@product) %>

O link_to gera a tag <a href="...">, e products_path/product_path(@product) vêm das rotas da app. Quando uma rota muda, esses links se atualizam. Um href="/products" fixo fica desatualizado em silêncio.

Linkando para uma parte específica da mesma página

<a href="#reviews">Jump to Reviews</a>
...
<section id="reviews">
  <h2>Reviews</h2>
</section>

Um prefixo # aponta para o id de um elemento na página atual. É assim que funciona o link "pular para o conteúdo principal" do curso de HTML semântico: layout, e vale para qualquer elemento com id.

mailto: e tel:: links que abrem outros apps

<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us: (555) 123-4567</a>

Esses esquemas de href passam a bola para o cliente de e-mail ou o discador do usuário. Use-os no lugar de texto que o usuário teria que copiar.

Pontos-chave

• O href é o que faz do <a> um hyperlink. Sem ele, não há papel link, foco de teclado nem navegação, só texto estilizado.
• URLs relativas (/products) são corretas para links dentro da sua própria app; URLs absolutas (https://...) são para destinos externos.
• O link_to do Rails com helpers de rota nomeada (products_path) mantém links corretos automaticamente quando rotas mudam, diferente de caminhos fixos.
• href="#algum-id" linka para um elemento específico na página atual: o mesmo mecanismo por trás de um link "pular para o conteúdo principal".