HTML <i> Tag
Das HTML <i> Tag markiert Text in einer anderen Stimme oder Stimmung — Fremdwörter, Fachbegriffe, taxonomische Namen, Gedanken — kursiv dargestellt.
Das HTML <i> Tag markiert einen Textabschnitt, der sich vom umgebenden Fließtext abhebt, weil er sich in einer anderen Stimme oder Stimmung befindet. Standardmäßig wird er kursiv dargestellt, aber sein Zweck ist semantischer, nicht dekorativer Natur. Dieses Kapitel erklärt, was das <i> Tag wirklich bedeutet, wie es sich von <em> unterscheidet, wann man es einsetzen sollte und wie es sich für unterstützende Technologien verhält.
Was <i> tatsächlich bedeutet
In HTML5 steht <i> für Text, der sich vom normalen Fließtext abhebt, ohne zusätzliche Betonung zu implizieren. Typische Anwendungsfälle sind:
- Fremdwörter oder -phrasen —
<i lang="la">in situ</i>,<i lang="fr">déjà vu</i>. - Fachbegriffe, die eingeführt oder benannt werden, wie ein Methodenname in einem Tutorial.
- Taxonomische (wissenschaftliche) Namen —
<i>Homo sapiens</i>,<i>Felis catus</i>. - Namen von Schiffen oder Gefährten —
<i>HMS Beagle</i>. - Gedanken einer Figur, die innerhalb eines Erzähltextes zitiert werden.
Der Browser stellt all diese Fälle kursiv dar, aber die Bedeutung ist „dieser Textabschnitt ist konzeptuell anders", nicht „sag das lauter."
Bei Fremdwörtern sollte das lang Attribut hinzugefügt werden (zum Beispiel lang="la" für Latein). Dies teilt Bildschirmlesegeräten mit, die Ausspracheregeln zu wechseln, und hilft Übersetzungstools, Text zu überspringen, der nicht übersetzt werden sollte.
<i> vs. <em>
Dies ist der wichtigste Unterschied:
<em>vermittelt Betonung — das Wort, das man beim Vorlesen stärker betonen würde, um die Bedeutung eines Satzes zu ändern. "Hast du mein Mittagessen gegessen?" zeigt auf eine bestimmte Person.<i>vermittelt eine andere Stimme oder Stimmung ohne zusätzliche Betonung — ein Fremdwort, ein Gedanke, ein Artname.
Ein schneller Test: Wenn man den Text laut vorlesen würde und das Wort dabei natürlich betonen würde, sollte man <em> verwenden. Wenn das Wort einfach von anderer Art ist (fremd, technisch, ein titelartiger Name), verwendet man <i>.
Verwandte präsentationsbasierte, aber semantische Geschwister-Elemente:
<b>— lenkt Aufmerksamkeit (Schlüsselwörter, Produktnamen) ohne zusätzliche Wichtigkeit.<strong>— markiert Text von starker Wichtigkeit, Ernst oder Dringlichkeit.<cite>— der Titel eines zitierten kreativen Werks (Buch, Film, Aufsatz).<mark>— Text, der zur Referenz oder Relevanz hervorgehoben wurde.
Barrierefreiheit
Das <i> Element hat keine implizite ARIA-Rolle und vermittelt keine Betonung für Bildschirmlesegeräte — ein Bildschirmlesegerät ändert seinen Ton für <i> Text nicht. <i> ist daher nur ein Hinweis auf die Art des Textes, nicht auf seine Wichtigkeit.
Wenn die Betonung tatsächlich die Nutzer von unterstützender Technologie erreichen muss (die Bedeutung des Satzes hängt davon ab), sollte stattdessen <em> verwendet werden, das Bildschirmlesegeräte mit stimmlicher Betonung ankündigen können. <i> sollte für Fälle reserviert werden, in denen die Kursivschrift Kategorie, nicht Nachdruck bedeutet.
Syntax
Das <i> Tag kommt in Paaren vor. Der Inhalt wird zwischen dem öffnenden (<i>) und schließenden (</i>) Tag geschrieben.
Beispiel des HTML <i> Tags
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Foreign phrase, with lang for correct pronunciation -->
<p>The samples were examined <i lang="la">in situ</i> before removal.</p>
<!-- Taxonomic name -->
<p>The domestic cat is <i>Felis catus</i>.</p>
<!-- A character's thought -->
<p>She paused at the door. <i>What if no one is home?</i></p>
</body>
</html>Attribute
Das <i> Tag unterstützt die globalen Attribute und Ereignisattribute.
Das <i> Tag stylen
<i> sollte für seine semantische Bedeutung verwendet werden, und CSS nur dazu dienen, sein Aussehen anzupassen — es ist nicht nötig, es durch ein nicht-semantisches Element zu ersetzen. Zum Beispiel kann die kursive Standarddarstellung beibehalten und gleichzeitig die Farbe geändert werden:
<style>
i {
color: #555;
}
</style>
<p>The domestic cat is <i>Felis catus</i>.</p>Wenn Kursivschrift nur aus visuellen Gründen ohne semantische Absicht gewünscht wird, sollte stattdessen die CSS font-style Eigenschaft auf einem normalen Element verwendet werden, anstatt ein <i> Tag hinzuzufügen.