Verwenden von Emojis in HTML
Emojis sind Zeichen aus dem UTF-8-Zeichensatz: 😄 😍 💗
Was sind Emojis?
Emojis sehen aus wie Bilder oder Symbole, sind es aber nicht.
Es sind Buchstaben (Zeichen) aus dem Zeichensatz UTF-8 (Unicode).
UTF-8 deckt fast alle Zeichen und Symbole der Welt ab.
Das HTML-charset-Attribut
Um eine HTML-Seite korrekt anzuzeigen, muss ein Webbrowser den in der Seite verwendeten Zeichensatz kennen.
Dies wird im <meta>Tag angegeben:
<meta charset="UTF-8">
Wenn nicht angegeben, ist UTF-8 der Standardzeichensatz in HTML.
UTF-8-Zeichen
Viele UTF-8-Zeichen können nicht auf einer Tastatur eingegeben werden, aber sie können immer mithilfe von Zahlen (sogenannten Entitätsnummern) angezeigt werden:
- A ist 65
- B ist 66
- C ist 67
Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>I will display A B C</p>
<p>I will display A B C</p>
</body>
</html>
Beispiel erklärt
Das <meta charset="UTF-8">Element definiert den Zeichensatz.
Die Zeichen A, B und C werden durch die Nummern 65, 66 und 67 dargestellt.
Damit der Browser versteht, dass Sie ein Zeichen anzeigen, müssen Sie die Entitätsnummer mit beginnen und mit ; (Semikolon).
Emoji-Zeichen
Emojis sind auch Zeichen aus dem UTF-8-Alphabet:
- 😄 ist 128516
- 😍 ist 128525
- 💗 ist 128151
Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
Da Emojis Zeichen sind, können sie wie jedes andere Zeichen in HTML kopiert, angezeigt und in der Größe angepasst werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
Einige Emoji-Symbole in UTF-8
| Emoticons | Wert | Versuch es |
|---|---|---|
| 🗻 | | |
| 🗼 | | |
| 🗽 | | |
| 🗾 | | |
| 🗿 | | |
| 😀 | | |
| 😁 | | |
| 😂 | | |
| 😃 | | |
| 😄 | | |
| 😅 | |
Eine vollständige Liste finden Sie in unserer HTML-Emoji-Referenz .