Webdesign

Definition

Das Attribut "title" steht für title (Titel).

Das Attribut "title" ist ein globales Attribut in HTML, das dazu dient, ergänzende Informationen zu einem Element bereitzustellen. In den meisten Desktop-Browsern wird der Inhalt des Attributs als kleiner Textkasten (Tooltip) eingeblendet, wenn der Nutzer mit der Maus über das Element fährt. Es soll den Zweck eines Elements verdeutlichen, ohne den primären Inhalt zu überladen. Screenreader lesen das Attribut oft nicht standardmäßig vor, und auf mobilen Geräten (Touch) gibt es keinen Hover-Effekt, wodurch die Information für viele Nutzer verloren geht. Wichtige Informationen sollten daher direkt im Text stehen und nicht in einem title-Attribut "versteckt" werden.

Syntax

title="..."

Gültige Tag

Werte

URL

Absolut und relativ

Beispiele

<a href="index.php?action=html_attr&job=---"
  title="Liste aller globalen Attribute:&#10;
  - class&#10;
  - id&#10;
  - title&#10;
  - style&#10;
  - ...">
  Globale Attribute anzeigen
</a>

<a href="#" class="custom-tooltip" data-tooltip="Hier steht dein Text.&#10;Sogar mit Umbruch!">
    Fahr über mich
  </a>

Anmerkungen

Bei <iframes> ist das title-Attribut sogar besonders wichtig, aber mit anderer Funktion: Es dient dort nicht primär als Tooltip, sondern zur barrierefreien Benennung des Frame-Inhalts für Screenreader.

Bei <abbr> kann der Inhalt des Attributs nicht frei gewählt werden. Es ist hier immer die unabgekürte Version zu hinterlegen.

Es kann bei langen "title"-Einträgen auch ein Zeilenumbruch erwirkt werden. Entweder mit dem Tag <br> oder der Entität '
'

Standard-Browser-Tooltips lassen sich nicht mit einfachen CSS-Properties stylen. Du kannst weder die Hintergrundfarbe noch die Schriftart oder die Dauer der Einblendung ändern. Wenn du schicke Tooltips willst, musst du auf Pseudo-Elemente (::after) oder JavaScript-Bibliotheken ausweichen.