Images

Em HTML imagens são definidas com a marcação <img>. A marcação imagem é um elemento vazio contendo apenas atributos e por isso não tem a marcação de fechamento. A forma mais simples de usar a marcação <img> é com o atributo src (src é uma abreviação de source). O valor do atributo src é a url da imagem que você quer mostrar.

A url aponta para onde a imagem está armazenada, que normalmente seria seu servidor.

<img src="my-picture.jpg">

Além do atributo src, o atributo alt também é requerido. Alt é uma abreviação de texto alternativo. O valor do atributo alt é o conteúdo alternativo do elemento - quer dizer, o atributo alt será mostrado se o navegador não for capaz de mostrar a imagem em si. O valor do atributo alt é também o que leitores de tela irão ler em voz alta quando chegarem na sua imagem. Isto significa que o atributo alt deve ser usado para descrever a imagem real. Digamos que a imagem é um retrato da Angelina Jolie, a marcação HTML deveria ser algo como isso:

<img src="my-picture.jpg" alt="Portrait of Angelina Jolie">

Por outro lado, uma imagem de Picasso deve ser descrita como "Retrato de Angel Fernandez de Soto. Um trabalho da parte final da Fase Azul de Picasso. Um homem provavelmente bebendo absinto, pintado em um estilo sombrio". E porque essa longa descrição? Imagine que você não pode ver a imagem e o texto alt é sua descrição da imagem.

Referente a marcação image, o último atributo para mencionar é o atributo title. Se você já passou seu mouse sobre uma imagem e viu um texto, este é o valor do atributo title. Além disso, esse texto é frequentemente referenciado como uma dica. Isso adiciona significado semântico a suas imagens mas só deve ser usado em imagens onde o efeito hover não conflita com a usabilidade da sua página. Isso significa que você não deve usar o atributo title em, por exemplo, imagens que servem como navegação na página.

O que você aprendeu

• Para realmente mostrar uma imagem você sempre deve adicionar o atributo src a marcação image
• O valor do atributo alt é essencial para leitores de tela e se o navegador, por alguma razão, não puder mostrar a imagem
• O atributo alt é relevante para leitores de tela e rastreadores web de mecanismos de busca – então lembre-se de usá-lo!