🖼️Tag <img> para imagens

A tag <img> insere imagens em páginas web, usando src para o caminho da imagem e alt para descrição. Caminhos podem ser absolutos ou relativos, dependendo da localização da imagem e do arquivo HTML.

Introdução

A tag <img> é usada em HTML para inserir imagens em uma página web. Essa tag é essencial para adicionar elementos visuais, como fotos e gráficos, que enriquecem o conteúdo. A <img> utiliza o atributo src para especificar o caminho do arquivo da imagem.

Estrutura Básica da Tag <img>

<img src="caminho/da/imagem.jpg">

Caminhos para Imagens

Para que o navegador saiba onde encontrar a imagem, você pode usar caminhos absolutos ou relativos:

1. Caminho Absoluto: Indica o URL completo da imagem, como um endereço completo.

   <img src="https://www.exemplo.com/imagens/foto.jpg">

   Este formato é útil quando a imagem está hospedada em outro site.

2. Caminho Relativo: Depende da localização do arquivo HTML em relação à imagem. É como dar direções baseadas na posição atual.

   • Mesmo Diretório: Se a imagem está na mesma pasta do arquivo HTML:

     <img src="foto.jpg">

   • Subdiretório: Se a imagem está em uma pasta dentro da pasta do HTML:

     <img src="imagens/foto.jpg">

   • Diretório Acima: Se a imagem está em uma pasta acima da pasta do HTML:

     <img src="../foto.jpg">

Exemplo de Estrutura de Diretórios

Imagine que você tem a seguinte estrutura de pastas:

/projeto
    /imagens
        - foto.jpg
    - index.html

Para inserir foto.jpg em index.html, você utilizaria o caminho relativo:

<img src="imagens/foto.jpg">

Essa combinação de uso correto da tag <img> e a compreensão de caminhos absolutos e relativos garantem que suas imagens sejam exibidas corretamente e que sua página seja acessível e bem estruturada.