Bilder

In HTML werden Bilder über das <img> Tag definiert. Das image Tag ist ein leeres Element, da es nur Attribute enthält und kein schließendes Tag besitzt. Der einfachste Weg das <img> Tag zu benutzen ist unter Verwendung des src Attributes. Der Wert des src Attributes ist der Pfad des Bildes, das man anzeigen möchte. (img = image / Bild | src = Source / Quelle)

Die URL verweist auf den Pfad wo das Bild gespeichert ist, was normalerweise auf dem Server ist.

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

Neben dem src Attribut ist auch das alt Attribut erforderlich. alt ist die Abkürzung für Alternate Text oder auch Alternativtext. Der Wert des alt Attributes ist der Fallback Inhalt des Elementes, dass heißt wenn das Bild durch den Browser nicht geladen werden konnte wird der festgelegte Alternativtext angezeigt. Aber auch Screenreader werden den alt Text vorlesen wenn eine Webseite vorgelesen wird. Die Seite wird somit auch für Menschen die nicht lesen können, oder Probleme haben klein gedruckte Texte zu lesen, zugänglich. Angenommen das Bild wäre ein Portrait von Angelina Jolie, dann sähe die Beschreibung in HTML wie folgt aus:

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

Andererseits könnte ein Bild auch die Beschreibung “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" haben. Aber warum diese lange Beschreibung? Stellt euch vor ihr könnt das Bild nicht sehen und der alt Text ist die Beschreibung des Bildes.

Das letzte Attribut ein Bild betreffend, dass zu erwähnen wäre ist das title Attribut. Wenn Sie jemals mit der Maus über ein Bild gegangen sind und dann einen Text gesehen haben, dann haben Sie den Wert des title Attributes gesehen. Dieser Wert wird auch oft als Tooltip bezeichnet. Das ergänzt eine gewisse semantische Bedeutsamkeit bei den Bildern, sollte aber nur genutzt werden wenn der hover Effekt nicht mit der Nutzbarkeit der Seite kollidiert. Das heißt man sollte das title Attribut zum Beispiel nicht auf Bildern verwenden, die der Navigation dienen.

Was wir gelernt haben

• Um ein Bild anzuzeigen muss dem image Tag das src-Attribut hinzugefügt werden.
• Der Wert des alt-Atrributes ist absolut wichtig für Screenreader und für den Fall das der Browser das Bild nicht darstellen/anzeigen kann.
• Das alt Attribut ist sowohl für Screenreader als auch für Suchmaschinen-Bots wichtig, also immer daran denken es zu benutzen!