In ihrem Artikel SyntaxHighlighter Evolved vs. manuelle Umsetzung von Codes in Beiträgen schreibt Sylvi:
Aber mal ganz ehrlich, das finde ich dann doch zu umständlich, für eine korrekte Darstellung sämtliche Sonderzeichen für Klammern und Leerschritte herauszusuchen. Ich beherrsche sie leider nicht aus dem effeff.
Ich hatte lange Zeit das gleiche Problem, ich konnte mir einfach nicht diese seltsamen HTML-Maskierungen merken. Bis ich dann mal in einem VHS-Kurs quasi so nebenbei erfahren habe, wie man sich einige dieser HTML-Maskierungen ableiten kann.
Eigentlich wollte ich die Erklärung dazu ja als Kommentar zu Sylvis Artikel schreiben, aber nachdem der Text immer länger und länger wurde, habe ich mich doch entschlossen, einen kompletten Artikel zu diesem Thema zu machen.
Was sind HTML-Maskierungen überhaupt?
Einige werden sicher mit dem Begriff HTML-Maskierungen nicht viel anfangen können, aber gesehen hat sie wohl schon jeder, der sich mit dem Erstellen von Websites beschäftigt. Gemeint sind solche seltsamen Zeichenkombinationen wie „>“, „ä“ und „ß“ (ohne die Anführungszeichen).
Wenn man die richtige Zeichenkodierung angibt, ist es normalerweise überhaupt kein Problem, Umlaute und Sonderzeichen zu verwenden. Man tippt sie einfach als Buchstaben bzw. Sonderzeichen ein: äöüß<>. Aber manchmal kommt man doch nicht um die HTML-Maskierungen herum. Dies ist z. B. der Fall, wenn man in WordPress einen Code angeben will.
Codezeilen in WordPress maskieren
Wenn man eine Codezeile in den HTML-Editor von WordPress einfügt und mit dem code-Tag auszeichnet, wird die Zeile nicht wie gewünscht dargestellt, sondern als Befehl ausgeführt:
ohne Maskierung:
mit Maskierung:
<a href="http://www.raetsel-forum.net">Link</a>
Die Lösung dieses Problems besteht darin, entweder den visuellen Editor von WordPress zu verwenden (den ich nicht so mag) oder das “
Der Aufbau der HTML-Maskierungen
HTML-Maskierungen beginnen immer mit einem „&“ und enden mit einem „;“ (ohne Anführungszeichen). Dazwischen stehen dann irgendwelche Buchstabenkombinationen. Diese Kombinationen sind nichts anderes als Abkürzungen von deutschen bzw. englischen Begriffen.
Die deutschen Umlaute sind z. B. wie folgt aufgebaut:
ä - ä - a Umlaut
Zwischen dem „&“ und „;“ stehen bei den Umlauten also immer der Buchstabe ohne die beiden Punkte und „uml“ für Umlaut. Beim großen „Ü“ sieht das dann so aus:
Ü - Ü - U Umlaut
Das „ß“ ist ein bisschen kniffliger:
ß - ß - sz-Ligatur
Der Begriff sz-Ligatur bezieht sich auf eine veraltete Bezeichnung des „ß“.
Für die meisten Sonderzeichen werden aber englische Begriffe verwendet:
< - < - lower than (kleiner als)
> - > - greater than (größer als)
" - " - quote (Anführungszeichen)
& - & - Ampersand (kaufmännisches Und)
Um die Maskierungen hier richtig darstellen zu können, musste ich übrigens das „&“ maskieren.
Übersicht der HTML-Maskierungen
Eine schöne Übersicht mit sehr vielen (wenn auch nicht allen) HTML-Maskierungen findet ihr bei Dr. Web:
Sonderzeichen maskieren – Liste
Die Liste stammt zwar bereits aus dem Jahre 2003, geändert hat sich an der Maskierung der Sonderzeichen aber bis heute nichts.
Nachtrag: Stephan und hansen haben in den Kommentaren auf die HTML-Zeichenreferenz bei SELFMHTL hingewiesen. Diese Liste ist wohl vollständig und wird auch optisch besser präsentiert als die von Dr. Web.
Hey,
wie du schon sagst, eigentlich sind die gängigsten Sonderzeichen recht leicht zu merken bzw. ableitbar und für alle anderen Fälle gibts ja Sonderzeichen-Listen. Die drweb-Liste kannte ich diesbezüglich noch gar nicht, aber in meinen Favoriten liegt immer die Sonderzeichen-Liste von selfhtml.org – finde ich auch übersichtlicher als die von drweb. 🙂
Gruß
@Stephan Ich kenne die Liste von SELFHTML, habe sie aber eben nicht mehr gefunden, als ich den Artikel schrieb. Wenn du den Link hast, kannst du ihn gerne hier posten 🙂
Meint Ihr Beiden diese Liste?
http://de.selfhtml.org/html/referenz/zeichen.htm
@hansen Ja, das war die Liste, die ich gemeint habe. Ich habe den Verweis dorthin noch in den Artikel mit aufgenommen.
Danke für den Link 🙂
Dass die so heißen war mir bisher noch gar nicht bewusst – also danke für den gelungenen Artikel.
Interessant sind meiner Meinung auch die beiden Entities „ und ” für deutsche Anführungszeichen.
Die schon erwähnte Liste von selfhtml verwende ich auch meistens. Habe mir aber nur die Suche dazu gemerkt „html zeichenreferenz“.
Mit der Zeit merkt man sich die meisten, bzw. die gängigsten. Nur wenn es mal was seltenes ist, kucke ich noch in die Liste
@Timo: Stimmt, die Entities für deutsche Anführungszeichen nutze ich auch immer. Jedoch hat sich im Web komischerweise das Zollzeichen als gängiges Anführungszeichen durchgesetzt – ertappe mich auch des öfteren dabei 😛
Das ist echt ein toller Blog, mir gefällt die Art wie Du den Blog presentiert. Mit den eigenen Grafiken, sieht man selten meist Copy & Paste 😉
Wer PHP am Laufen hat, kann auch einfach die Funktion htmlentities() verwenden, oder zum Nachschauen die von htmlentities() verwendete Tabelle ausgeben lassen. 🙂
http://www.php.net/manual/de/function.get-html-translation-table.php
Dein Blog ist gut aufgebaut und wirkt ansprechend. Vor allem dieser Artikel hier hat mir viel gebracht, (siehe Entities), keep on going!
Ich bin eigentlich ein ziemlicher Neuling auf dem Gebiet HTML. Ich verwende auch immer eine Liste mit den wichtigsten Zeichen. Einige Zeichen lernt man mit der Zeit automatisch anzuwenden, bei anderen muss ich immer mal wieder nachsehen.
Hallo, interessanter Artikel. Meine erste Website habe ich im Jahr 2002 mit den Hinweisen auf selfhtml.org zusammengebastelt. Seit dem schaue ich, wenn eine HTML spezifische Fragestellung auftritt nach wie vor gerne bei selfhtml.org nach. Das kommt allerdings, nicht nur aufgrund des Lerneffekts, immer seltener vor. Die „modernen“ CM-Systeme und Plugins nehmen einem diesbezüglich eine Menge Arbeit ab.