Links e imagens em HTML com contexto e alternativa

Links transformam documentos separados numa web, e imagens acrescentam informação visual ao conteúdo. Nesta aula, você vai criar os dois sem depender de “clique aqui” nem deixar um espaço sem sentido quando a imagem não carregar.

Pense numa estação de metrô. A placa precisa dizer para onde a passagem leva; uma foto no mapa precisa ter uma função, não estar ali por acaso. No HTML, o elemento a cria o caminho e o atributo href guarda o destino. O elemento img incorpora a imagem e alt oferece uma alternativa textual quando ela não pode ser vista. O limite da comparação é que o navegador também usa URLs para arquivos, fragmentos e outros protocolos; não existe uma catraca física entre as páginas.

Escreva um link que faça sentido sozinho

Um link tem destino e texto clicável:

<a href="https://developer.mozilla.org/">Consultar a documentação da MDN</a>

A URL começa com https://, portanto é absoluta: contém o endereço completo. Para uma página do mesmo projeto, você pode usar um caminho relativo:

<nav aria-label="Navegação principal">
  <a href="index.html">Início</a>
  <a href="projetos.html">Projetos</a>
  <a href="contato.html">Contato</a>
</nav>

O navegador resolve esses caminhos a partir do arquivo atual. Se projetos.html estiver numa pasta chamada paginas, o destino vira paginas/projetos.html. Um caminho relativo se parece com uma orientação “na porta ao lado”; uma URL absoluta se parece com um endereço completo. A comparação ajuda, mas a resolução técnica depende da URL atual, não da posição do arquivo no editor.

Para apontar a uma seção da mesma página, dê um id ao destino e use #id:

<a href="#habilidades">Ir para habilidades</a>

<section id="habilidades">
  <h2>Habilidades</h2>
  <p>HTML, comunicação e vontade de praticar.</p>
</section>

Evite usar “clique aqui” como texto. Leitores de tela podem navegar apenas pela lista de links; cinco itens chamados “saiba mais” não explicam os destinos.

Dê uma alternativa à imagem

O atributo src informa a fonte e alt descreve a informação relevante:

<figure>
  <img
    src="imagens/perfil-bia.jpg"
    alt="Bia sorrindo em frente a uma estante de livros"
    width="480"
    height="320"
  >
  <figcaption>Bia durante a apresentação do projeto final.</figcaption>
</figure>

figure agrupa uma mídia e figcaption fornece legenda visível. O alt não precisa começar com “imagem de”, porque a tecnologia assistiva já anuncia o elemento como imagem. Descreva o que cumpre a função naquele contexto. Se a foto for apenas decoração e não acrescentar conteúdo, use alt=""; isso orienta o leitor de tela a ignorá-la. Não omita o atributo.

Largura e altura ajudam o navegador a reservar espaço antes do download. O CSS pode adaptar a exibição, mas as dimensões mantêm a proporção conhecida. Se a imagem falhar, o texto alternativo ainda comunica seu papel.

No laboratório, altere o texto da imagem e depois mude seu alt para refletir a nova mensagem. O critério não é escrever a descrição mais longa; é permitir que uma pessoa entenda por que aquela imagem está no cartão. Em seguida, leia apenas os textos dos links. Se cada destino continuar previsível, a navegação está fazendo seu trabalho.

Faça ainda uma prova de falha: altere temporariamente src para um arquivo que não existe. O navegador deve mostrar o texto alternativo. Restaure o caminho depois do teste. Assim, você observa a função de alt sem depender apenas da explicação.

Na próxima aula, vamos ampliar a mesma ideia: escolher elementos pelo papel da região inteira, não apenas pelo formato de uma frase ou de um link.