Verwendung von Emojis in HTML
Emojis sind Zeichen aus dem UTF-8-Zeichensatz: 😄 😍 💗
Einige Emoji-Symbole in UTF-8
| Emoji | Wert | |
|---|---|---|
| 🗻 | 🗻 | Try it » |
| 🗼 | 🗼 | Try it » |
| 🗽 | 🗽 | Try it » |
| 🗾 | 🗾 | Try it » |
| 🗿 | 🗿 | Try it » |
| 😀 | 😀 | Try it » |
| 😁 | 😁 | Try it » |
| 😂 | 😂 | Try it » |
| 😃 | 😃 | Try it » |
| 😄 | 😄 | Try it » |
| 😅 | 😅 | Try it » |
Vollständige HTML-Emoji-Referenz
Beispiele für HTML-Emojis
🚀🚁🚂🚃🚄
💺💻💼💽💾
👮👯👰👱👲
🐂🐃🐄🐅🐆
Was sind Emojis?
Emojis sehen aus wie Bilder oder Symbole, sind es aber nicht.
Es handelt sich um Buchstaben (Zeichen) aus dem Zeichensatz UTF-8 (Unicode).
UTF-8 deckt fast alle Zeichen und Symbole der Welt ab.
Das HTML-Zeichensatzattribut
Um eine HTML-Seite korrekt anzuzeigen, muss ein Webbrowser den auf der Seite verwendeten Zeichensatz kennen.
Dies wird im Tag <meta> 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, sie können jedoch immer mit Zahlen (sogenannten Entitätszahlen) 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>
Try it Yourself »
Beispiel erklärt
Das Element <meta charset="UTF-8"> definiert den Zeichensatz.
Die Zeichen A, B und C werden durch die Zahlen 65, 66 und 67 angezeigt.
Damit der Browser erkennt, dass Sie ein Zeichen anzeigen, müssen Sie die Entitätsnummer mit &# beginnen und mit enden beenden. (Semikolon).
Emoji-Zeichen
Emojis sind ebenfalls 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>
Try it Yourself »
Da es sich bei Emojis um Zeichen handelt, 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>
Try it Yourself »
Eine vollständige Liste finden Sie in unserer HTML-Emoji-Referenz.
