Há uma diferença entre inserir uma imagem em um página da Internet e tornar essa imagem um link clicável. Apesar de HTML é semelhante, um link depende de um âncora elemento enquanto uma imagem usa o img elemento. No entanto, uma imagem pode ser aninhada em uma âncora, tornando essa imagem clicável como um link.
Inserindo imagens em elementos âncora
Um uso comum de um link baseado em imagem é o gráfico do logotipo do site, que é então vinculado à página inicial do site.
Veja como você colocaria uma imagem não clicável no documento HTML:
Para transformar a imagem em um link, adicione o link âncora, abrindo o elemento âncora antes da imagem e fechando a âncora depois da imagem. Essa técnica é semelhante a como você vincula o texto, exceto que, em vez de embrulhar as palavras, você embrulha a imagem:
Ao adicionar este tipo de HTML à sua página, não coloque nenhum espaço entre a tag âncora e a tag da imagem. Se você fizer isso, alguns navegadores adicionarão pequenas marcas ao lado da imagem, o que parecerá estranho.
O logotipo agora também atua como um botão da página inicial, que é praticamente um padrão da web nos dias de hoje.
Observe que não incluímos nenhum estilo visual, como largura e altura da imagem, em nossa marcação HTML. Deixaremos esses estilos visuais para CSS e manteremos uma separação clara da estrutura HTML e dos estilos CSS.