Atributos para Imagens e Links

Uma página sem links e sem imagens é um beco sem saída silencioso

Links são os tendões da web. Imagens são comunicação visual. Mas sem href, src, alt, width, height e segurança correta, tudo quebra.

href, links internos, externos e âncoras

O atributo href define o destino do link. Sem ele, a tag a perde sua função vital de conexão.

Link interno

<a href="produtos/catalogo.html">Ver catálogo completo</a>

Link externo

<a href="https://www.wikipedia.org">Fonte: Wikipedia</a>

Link de âncora

<a href="#depoimentos">Leia depoimentos</a>

<section id="depoimentos">
  <h2>Depoimentos</h2>
</section>

target="_blank" e rel="noopener noreferrer"

O target="_blank" abre um link em nova aba. Para links externos, combine com rel="noopener noreferrer" para reduzir riscos de segurança.

<a href="https://github.com/refatorando"
   target="_blank"
   rel="noopener noreferrer">
  Ver código no GitHub
</a>

src, alt, width e height

A tag img é vazia e depende de atributos. O src define a origem. O alt comunica significado. width e height estabilizam o layout.

Imagem com src relativo

<img src="imagens/logo-mestre.png" alt="Logotipo da escola Mestre HTML5">

Imagem com URL absoluta

<img src="https://exemplo.com/banner.jpg" alt="Banner promocional de tecnologia">

Alt descritivo correto

<img src="grafico.png"
     alt="Gráfico de barras mostrando crescimento de 20% nas vendas em 2026">

Alt vazio para imagem decorativa

<img src="borda-enfeite.png" alt="">

Width e height

<img src="foto.jpg" alt="Equipe trabalhando" width="600" height="400">

Relativo, absoluto e arquivo quebrado

imagens/foto.jpg
../assets/logo.png

https://site.com/imagens/foto.jpg

Links e imagens sem amadorismo

• Use texto de link descritivo.
• Evite “clique aqui”.
• Não use href vazio sem motivo técnico.
• Use target="_blank" com rel="noopener noreferrer" em links externos.
• Organize imagens em pasta dedicada.
• Use alt descritivo em imagem informativa.
• Use alt="" em imagem puramente decorativa.
• Use width e height quando possível.
• Teste caminhos no navegador e no GitHub Pages.

Teste falhas de caminho e âncora

1. Crie uma imagem com src propositalmente errado.
2. Coloque um alt descritivo e veja o fallback no navegador.
3. Crie um link de âncora apontando para um id inexistente.
4. Corrija o id e teste novamente.
5. Abra DevTools e veja erros 404 no Console ou Network.

Exercício guiado

Crie três sections com IDs: teoria, pratica e entrega. No topo, faça um nav com links de âncora para cada uma.

Erros comuns e correções

Você domina links e imagens?

• Sei diferenciar caminho relativo e absoluto.
• Sei usar ../ para subir um nível na pasta.
• Sei criar links internos, externos e âncoras.
• Uso rel junto de target="_blank" em links externos.
• Uso alt descritivo para imagens informativas.
• Uso alt vazio para imagens decorativas.
• Uso width e height para reduzir deslocamento visual.

15 perguntas para provar domínio

1. Função do elemento a? Criar hiperlinks.
2. O que href define? O destino do link.
3. Como abrir em nova aba? target="_blank".
4. Por que usar rel? Para segurança em links externos.
5. Diferença entre relativo e absoluto? Relativo depende do arquivo; absoluto é URL completa.
6. Img precisa de fechamento? Não, é tag vazia.
7. O que src define? A origem da imagem.
8. Para que serve alt? Acessibilidade e fallback.
9. Alt de imagem decorativa? alt="".
10. Por que width e height? Estabilizam o layout.
11. O que ../ faz? Sobe um nível na pasta.
12. Formato com transparência? PNG.
13. Links internos podem usar ids? Sim, com # no href.
14. Imagem sem alt causa o quê? Falha de acessibilidade e SEO.
15. Maiúsculas importam no servidor? Sim.

Acessibilidade, SEO, mercado e manutenção

Acessibilidade

O alt transforma informação visual em texto acessível. Links descritivos fazem sentido mesmo quando lidos fora de contexto.

SEO

Buscadores usam o texto dos links e o alt das imagens para entender relevância, contexto e relação entre páginas.

Mercado

Imagem quebrada, link morto e link externo inseguro são sinais imediatos de amadorismo em projeto real.

Registre sua página com links e imagens

git status
git add .
git commit -m "aula-14: cria pagina com links e imagens profissionais"
git push

• git status: verifica arquivos novos e imagens adicionadas.
• git add .: adiciona mudanças e mídias.
• git commit: registra domínio de conectividade e mídia.
• git push: envia tudo para o GitHub.

Evidência para portfólio

• Arquivo links-imagens-profissionais.html.
• Print da página com imagens carregadas.
• Print de links internos funcionando.
• Print do código com href, rel, src, alt, width e height.
• Commit no GitHub.