A tag img

• A tag img é utilizada para inserir imagens em uma página HTML.
• Imagens em HTML são links para um arquivo de imagem, ou para outra página da web onde esta imagem se encontre.
• A tag img é vazia. Ela contém apenas atributos, e não necessita ser fechada.

A tag img possui os seguintes atributos:

src especifica o caminho até a imagem. Quando a página é carregada, o browser busca a imagem no endereço fornecido e insere na página. Por isso, é importante que a imagem continue no mesmo endereço que você forneceu inicialmente, do contrário o browser não irá conseguir encontrar a imagem, e o usuário irá enxergar um ícone de link quebrado.

• O caminho pode ser tanto um link para outra página da web como o nome do arquivo de imagem no computador (ou o endereço completo, caso o arquivo esteja localizado em outra pasta).
• É possível adicionar GIFs animados.

alt especifica um texto alternativo para a imagem, caso ela não apareça para o usuário. A imagem pode não aparecer por problemas de conexão lenta ou caminho quebrado. Também indica o que será lido em um screen reader para o usuário que ativar essa opção de acessibilidade, portanto é importante que esse atributo esteja presente e contenha uma explicação da imagem.

width especifica a largura da imagem na página.

height especifica a altura da imagem na página.

Dica: Embora a tag img contenha os atributos width e height, é importante especificar a largura e a altura da imagem utilizando o atributo style, para evitar que outra formatação CSS mude o tamanho da imagem.

Imagem como Link

Para utilizar uma imagem como link, coloque a tag img dentro da tag a. Nesse exemplo, a imagem do gato redireciona para o DuckDuckGo.

Imagem ao lado do texto

Para fazer a imagem ficar ao lado do texto, utilize o atributo float do CSS.

Essa imagem vai ficar do lado esquerdo do texto.

XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX

Essa imagem vai ficar do lado direito do texto.

XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX

<- Voltar