Images

In HTML le immagini sono definite dal tag <img>. Il tag immagine è un elemento vuoto che contiene soltanto attributi e infatti non ha tag di chiusura. Il modo più facile di utilizzare il tag <img> è con l'attributo src (abbreviazione di "source", "fonte" in inglese). Il valore dell'attributo src è l'url dell'immagine che vogliamo mostrare.

L'url punta a dove l'immagine è salvata, tipicamente dovrebbe essere sul tuo server.

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

Besides the src attribute, the alt attribute is required too. Alt is an abbreviation for alternate text. The value of the alt attribure is the elements fallback content – this means, the alt attribute will be shown if the browser was not able to show the picture itself. The value of the alt attribute is also what screenreaders will read aloud when they come to your image. This means, that the alt attribute should be used to describe the actual picture. Let’s say, the picture is a portrait of Angelina Jolie, the HTML markup would look like this:

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

On the other hand, a picture of Picasso might be described as “Portrait of Angel Fernandez de Soto. A work from the later part of Picasso’s Blue Period. A man probably drinking absinthe, depicted in a gloomy style". And why this long description? Imagine you cannot se the picture and the alt txt is your description of the picture.

The last attribute to mention regarding the image tag is the title attribute. If you have ever hovered your mouse over an image and seen a text, this is the value of the title attribute. In addition, this text is often referred to as a tooltip. This adds semantic meaning to your pictures but should only be used on pictures where the hover effect does not conflict with the usability of your page. This means that you should not use the title attribute on e.g. images that functions as page navigation.

What you have learned

• In order to actually show an image, you always have to add the src-attribute to the image-tag
• The value of the alt attribute is essential to screenreaders and if the browser for some reason cannot show your picture
• The alt attribute is relevant for screenreaders and searchengines’ webcrawlers – so remember to use it!