Emojis sind gewöhnliche Unicode-Zeichen. Mit der Zeichenkodierung UTF-8 lassen sie sich direkt in den Quelltext schreiben – ein eigenes Element gibt es dafür nicht.

Voraussetzung: die Kodierung

<meta charset="UTF-8">

Fehlt diese Angabe, erscheinen Emojis als Zeichensalat. Wichtig ist außerdem, dass die Datei selbst als UTF-8 gespeichert ist – der Editor entscheidet das, nicht die Angabe im Dokument.

Direkt oder als Referenz

<p>Direkt eingefügt: 🚀</p>
<p>Als numerische Referenz: &#128640;</p>

Beides ergibt dasselbe Zeichen. Direkt eingefügt ist lesbarer; die Referenz hilft, wenn ein Redaktionssystem oder eine Datenbank an einer Stelle der Kette nicht sauber mit UTF-8 umgeht.

Der wichtigere Teil: die Ansage

Screenreader lesen den Namen des Zeichens vor. Bei einem dekorativen Emoji im Fließtext stört das, bei einem bedeutungstragenden ist es nötig. Die Auszeichnung unterscheidet beide Fälle:

<!-- dekorativ: wird übersprungen -->
<span aria-hidden="true">🎉</span>

<!-- trägt Bedeutung: mit Beschreibung -->
<span role="img" aria-label="Achtung">⚠️</span>

Der zweite Fall ist selten – und meistens ein Hinweis darauf, dass ein Wort die bessere Lösung wäre. Ein Warnzeichen ohne das Wort „Achtung" ist auf einem Gerät, das es nicht darstellen kann, nichts.

Darstellung ist Systemsache

Wie ein Emoji aussieht, entscheidet das Betriebssystem, nicht die Website. Dasselbe Zeichen sieht auf verschiedenen Geräten unterschiedlich aus, und einzelne Zeichen fehlen auf älteren Systemen ganz – dann erscheint ein leeres Rechteck.

Für Symbole, die verlässlich gleich aussehen müssen, ist deshalb eine SVG-Grafik die bessere Wahl. Sie lässt sich zusätzlich einfärben und skalieren.

Emojis in Titel und Beschreibung

Technisch zulässig sind sie auch im Seitentitel und in der Beschreibung. Ob Google sie in der Trefferliste anzeigt, entscheidet Google – häufig werden sie entfernt. Verlassen sollte man sich also nicht darauf, und die Aussage des Titels darf nicht an ihnen hängen.