Webseiten optimieren: Die img-Attribute alt und title
Allgemeines:
Das alt-Attribut enthält alternativen Text, der eine Grafik beschreibt.
Das title-Attribut kann mit einem beliebigem Text versehen werden, der weiterführende Information zu dem Bild enthält
und wird von modernen Browser als sog. Sprechblasentext angezeigt, wenn die Maus über einer Grafik verweilt, der ein
title-Text zugewiesen wurde.
Viele Webdesigner erstellen Grafiken ohne die Angabe eines alt-Attributes und erzeugen damit ungültiges html.
Ein sehr weit verbreitetes Mißverständnis, dem ich auch selbst unterlag, besteht obendrein darin, das alt-Attribut
zur Anzeige eines Balloon- oder auch Sprechblasentextes zu benutzen oder mit Massen von Text zu füllen, um Suchmaschinen
zu einer besseren Bewertung der Webseite in ihren Trefferlisten zu bewegen.
Aufmerksame Leute, die fleißig alt-Texte geschrieben haben, werden sich z.B. mit Browsern, die auf dem Mozilla-Code
beruhen (Firefox), wundern, daß ihre alt-Texte gar nicht angezeigt werden. Für genau diesen Zweck sollte das
title-Attribut benutzt werden !
Gnädige Browser (wie mein alter Internet Explorer 4.0) zeigen den Text eines title-Attributes an, wenn dieses definiert
wurde, ansonsten den eines alt-Attributes, wenn es denn existiert, obwohl letzteres streng genommen gar nicht richtig ist.
nach oben
Das alt-Attribut:
Das alt-Attribut ist innerhalb eines img-Tags nach HTML-Standard Pflicht !
Der darin notierte Text wird angezeigt, wenn eine Grafik beim Besucher der Webseite nicht angezeigt werden kann.
Das kann passieren, weil die Anzeige von Grafiken im Browser des Besuchers abgeschaltet ist, oder weil eine blinde
Person die Webseite lädt, oder weil der Server die Grafikdatei nicht ausliefern kann oder aus vielerlei Gründen mehr.
Versuchen Sie nach Möglichkeit, Inhalt und Sinn der Grafik möglichst treffend zu beschreiben.
Wenn Sie aus irgendwelchen Gründen keinen alt-Text angeben wollen, können Sie der html-Vorschrift mit der Angabe von
alt="" genüge tun.
nach oben
Das title-Attribut:
Das title-Attribut ist gedacht für informative Ergänzungen und Erweiterungen einzelner Webseiten-Elemente, wenn diese
in dargestellter Form den Aufbau und Fluß einer Webseite behindern würden.
So können z.B. in einem Eingabeformular die Beschriftungstexte der Eingabefelder mit einem title-Text versehen werden,
der zusätzliche Information, wie die einzelnen Felder auszufüllen sind, bereitstellt.
Siehe hierzu auch die Beispiele auf dieser Seite.
nach oben
Die Suchmaschinen:
Irgendwo stand mal geschrieben, daß manche Suchmaschinen den Inhalt der alt-Texte lesen und daß man durch entsprechende
Angaben somit Einfluß auf die Bewertung nehmen könne. Ob das wirklich der Fall ist und wenn ja, welche Suchmaschine
überhaupt (und in welchem Maße) angegebene alt-Texte bewertet, bleibt eines der vielen, gut gehüteten Geheimnisse der
Betreiber der großen Suchmaschinen.
Grundsätzlich gilt, daß eine vernünftig nach den seit Jahren geltenden Regeln für gültiges und gutes html erstellte
Webseite, in der Informationen enthalten sind und die einer gewissen Pflege unterliegt, auch von Suchmaschinen
gefunden und entsprechend gut gelistet wird.
nach oben
Beispiele:
-
Die Attribute alt und title im img-Tag:
Wenn Sie in einem html-Dokument folgendes notieren:
<img src="titlealt.gif" alt="Das ist alternativer Text..." title="Das hingegen ist der Text...." style="border:4px ridge;" />
sieht das in einem Browser so aus:
Wenn Sie mit der Maus über die eingerahmte, nicht dargestellte Grafik fahren, sehen Sie in einer Art Sprechblase den title-Text
-
Das title-Attribut in einem beliebigen Tag:
Ein in html notiertes Formular
<form>
<label for="eingabefeld" title="Geben Sie in diesem Feld Strasse und Hausnummer...">Straße:</label>
<input id="eingabefeld" type="text" title="Geben Sie in diesem Feld Strasse und Hausnummer..."></input>
</form>
ermöglicht es, daß im Browser ein passender Infotext angezeigt wird, wenn die Maus z.B. über dem Beschriftungstext
oder dem Eingabefeld verweilt:
nach oben
