Links e navegação entre páginas

A tag que fez a web

<a href="portfolio.html">Ver os projetos</a>

<a> é a tag (de anchor, âncora)
href é para onde leva
o texto entre as tags é o que a pessoa vê e clica

Isto é o que torna a web uma teia: qualquer documento pode apontar para qualquer outro. E é o que transforma seis arquivos soltos num site.

Caminhos: relativo e absoluto

Relativo; dentro do seu site, a partir de onde o arquivo está:

<a href="sobre.html">Sobre</a>
<!-- arquivo na mesma pasta -->

<a href="projetos/feira.html">Feira do produtor</a>
<!-- dentro da subpasta projetos -->

<a href="../index.html">Início</a>
<!-- .. sobe uma pasta -->

Absoluto; endereço completo, para fora do seu site:

<a href="https://github.com/marinasales">Meu GitHub</a>

Âncoras: saltar dentro da página

A página inicial do portfólio é longa: abertura, sobre, como trabalho, projetos, trajetória, contato. Dá para levar a pessoa direto a uma seção. São duas partes:

<!-- 1. O destino ganha um id -->
<h2 id="projetos">Projetos selecionados</h2>

<!-- 2. O link aponta para ele com # -->
<a href="#projetos">Ir para os projetos</a>

Isso é o que faz um sumário funcionar. E também dá para apontar para uma seção de outra página:

<a href="carreira.html#formacao">Minha formação</a>

Telefone, WhatsApp e e-mail

A página de contato existe para isto:

<a href="mailto:[email protected]">[email protected]</a>
<a href="https://wa.me/5597999998888">Falar no WhatsApp</a>
<a href="tel:+5597999998888">(97) 99999-8888</a>

O primeiro abre o aplicativo de e-mail. O segundo abre a conversa direto. O terceiro abre o discador no celular.

O número do WhatsApp vai sem espaço, sem parênteses e sem traço, com o código do país na frente: 55 + DDD + número.

As redes, e o link do código

<ul>
  <li>
    <a href="https://github.com/marinasales" target="_blank" rel="noopener noreferrer">
      GitHub
    </a>
  </li>
  <li>
    <a href="https://www.linkedin.com/in/marinasales" target="_blank" rel="noopener noreferrer">
      LinkedIn
    </a>
  </li>
</ul>

target="_blank" abre em outra aba. O rel="noopener noreferrer" vai junto por segurança: sem ele, a página aberta ganha uma referência à sua e pode manipulá-la.

O texto do link importa mais do que parece

<!-- Ruim -->
<p>Para ver meus projetos, <a href="portfolio.html">clique aqui</a>.</p>

<!-- Bom -->
<p>Veja os <a href="portfolio.html">projetos que já estão no ar</a>.</p>

O motivo é o mesmo dos títulos: leitores de tela têm um atalho que lista só os links da página, para a pessoa escolher para onde ir. Essa lista, no primeiro caso, é:

clique aqui
clique aqui
clique aqui

No segundo:

projetos que já estão no ar
código do site da feira
conversar comigo

Um funciona, o outro não. E não custa nada a mais.

<nav aria-label="Menu principal">
  <ul>
    <li><a href="index.html">Início</a></li>
    <li><a href="sobre.html">Sobre</a></li>
    <li><a href="portfolio.html">Portfólio</a></li>
    <li><a href="stack.html">Stack</a></li>
    <li><a href="carreira.html">Carreira</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul>
</nav>

O aria-label nomeia o menu: útil porque o portfólio tem dois <nav> - o do topo e o do rodapé -, e sem nome os dois são anunciados como "navegação", sem diferença entre eles.

Este bloco é igual nos seis arquivos, e é copiado e colado mesmo. Com HTML puro não há como escrevê-lo uma vez só: trocar um item obriga a trocar em seis lugares.

No portfólio

Hoje o site deixa de ser um punhado de arquivos:

crie os arquivos que faltam - portfolio.html e contato.html -, os dois com o esqueleto e o <title> próprio;
cole o mesmo <nav aria-label="Menu principal"> no topo do <body> das seis páginas;
na página inicial, dê id a cada <h2> de seção e monte um <nav> de âncoras logo abaixo da abertura;
em contato.html, monte a lista de canais: e-mail, WhatsApp, e as redes com target="_blank" e rel="noopener noreferrer";
na abertura da inicial, ponha os dois links de ação: um para contato.html ("Vamos conversar") e um para o seu currículo em PDF, se você já tiver um.

Depois percorra os seis arquivos clicando em tudo. Link quebrado dentro do próprio portfólio é o defeito que mais se vê, e o mais fácil de achar.

Exercícios

Ligue as seis páginas do portfólio com o mesmo menu e confira que dá para ir de qualquer uma a qualquer outra.
Ponha id nas seções da página inicial e monte o sumário de âncoras.
Escreva os três links de contato: e-mail, WhatsApp e telefone.
Procure na sua página algum "clique aqui", "saiba mais" ou "ver projeto" repetido e reescreva o texto para dizer o destino.
Renomeie sobre.html para sobre-mim.html e veja quantos links quebram. Depois desfaça.
Liste os links da sua página inicial num papel, só o texto deles, na ordem. Dá para entender o site só por essa lista?

Referências

Criando hyperlinks - MDN - a tag <a> e as boas práticas de texto de link
<a> - MDN - todos os atributos, incluindo rel e target
HTML Links - W3Schools - exemplos com editor ao lado