Links
Um link é a porta que liga uma página a outra, ou a outra parte da mesma página. É a essência do 'hipertexto' no nome do HTML.
Estudar esta lição interativa →Sem links, a web seria uma coleção de páginas isoladas, sem jeito de ir de uma para a outra a não ser digitando endereços na mão o tempo todo. O link, criado com a tag <a> (de "anchor", âncora), é o que transforma páginas soltas numa rede, literalmente o "World Wide Web".
Pense num link como uma porta entre dois cômodos de uma casa grande. O href (de "hyperlink reference") é o endereço que diz para onde essa porta leva: pode ser outro cômodo da mesma casa (outra página do mesmo site), a casa do vizinho (um site diferente) ou até um lugar específico dentro do mesmo cômodo (uma âncora, com #, que rola até um ponto da própria página).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Quatro tipos de destino: e-mail (mailto:), telefone (tel:), site externo em nova aba e âncora dentro da própria página.
Repare no atributo target="_blank" que às vezes acompanha um link: ele faz o link abrir numa aba nova, em vez de trocar a página atual. É comum ver isso em links externos, para não tirar a pessoa do site em que ela está. Além de https://..., o href também aceita endereços especiais: mailto:contato@site.com abre o programa de e-mail padrão já com o destinatário preenchido, e tel:+5511999999999 faz o mesmo para uma ligação, algo muito usado em sites acessados pelo celular. Escreva o número no formato internacional (+55, DDD e número, sem espaços nem parênteses no href): ele funciona de qualquer país, e o texto visível do link pode continuar bonito, como "(11) 99999-9999". Já o link âncora (href="#rodape-demo") rola até o elemento cujo id é igual ao que vem depois do #.
O target="_blank" abre o destino numa aba nova, e isso surpreende quem usa leitor de tela ou só o teclado. Escreva no próprio texto do link que ele abre em nova aba (como no exemplo "MDN em português (abre em nova aba)"). Navegadores atuais já tratam o target="_blank" com segurança, mas muita gente ainda acrescenta rel="noopener" por hábito, e não faz mal nenhum.
Três armadilhas frequentes: usar href="#" como "link provisório" e esquecer de completar depois (o link não vai a lugar nenhum e frustra quem clica); esquecer o https:// num link externo, o que faz o navegador tentar abrir um endereço relativo dentro do seu próprio site, geralmente quebrado; e escrever links com texto genérico como "clique aqui" ou "saiba mais" sem contexto, o que é ruim tanto para quem lê por cima quanto, principalmente, para quem usa leitor de tela e navega pulando de link em link, ouvindo só o texto de cada um. Prefira sempre um texto que descreva para onde o link leva.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Complete o mailto:, o tel: e os textos dos links.