html-maskierungen

Aufbau der HTML-Maskierungen

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:

Link

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 “

Maskierung von Sonderzeichen in HTML

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:

ä - &auml; - 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:

Ü - &Uuml; - U Umlaut

Das „ß“ ist ein bisschen kniffliger:

ß - &szlig; - sz-Ligatur

Der Begriff sz-Ligatur bezieht sich auf eine veraltete Bezeichnung des „ß“.

Für die meisten Sonderzeichen werden aber englische Begriffe verwendet:

< - &lt; - lower than (kleiner als)

> - &gt; - greater than (größer als)

" - &quot; - quote (Anführungszeichen)

& - &amp; - 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.

Veröffentlicht von

Cujo

Die Webmaster-Zentrale wurde im Januar 2010 von mir gegründet. Dabei haben mich 3 Internetauftritte maßgeblich beeinflusst. Zum einen die Website des t3n-Magazins, www.t3n.de, auf der immer sehr interessante Artikel zum Thema Webseitenerstellung gepostet wurden. Genau solche Artikel wollte ich auch schreiben. Dann bin ich schon seit mehreren Jahren im Homepage-Forum, www.homepage-forum.de, aktiv. Im Laufe der Zeit stellte ich fest, dass dort immer die gleichen Fragen gestellt wurden. Jedesmal darauf die gleichen Antworten zu geben, war erstens langweilig, zweitens zeitraubend und drittens hat es sich nicht gelohnt, die Fragen ausführlich zu beantworten. In der Webmaster-Zentrale greife ich jetzt oft Fragen auf, die im Homepage-Forum gestellt wurden und habe die Möglichkeit die angesprochenen Themen viel detaillierter zu behandeln. Bei wiederkehrenden Fragen poste ich dann einen Link zu einem Artikel in der Webmaster-Zentrale. Dadurch erhalten die User ausführlichere Antworten als normalerweise in einem Forum üblich. Die Idee, Informationen bereitzustellen und diese im Forum zu verlinken, habe ich von Daniel, www.homepage-faqs.de, übernommen. Daniel bezeichnet sich selbst als Forenhelfer und ist sehr aktiv im Homepage-Forum. Er hat schon zahllosen Usern mit seinen Informationen geholfen und ihnen die Grundlagen der Webseitenerstellung erklärt. Diese 3 Webauftritte hatten einen so großen Einfluss auf mich, dass ich sicher behaupten kann, dass es ohne sie die Webmaster-Zentrale nicht geben würde.

13 Gedanken zu „Aufbau der HTML-Maskierungen“

  1. 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ß

  2. @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 :)

  3. @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 :)

  4. Interessant sind meiner Meinung auch die beiden Entities „ und ” für deutsche Anführungszeichen.

  5. 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

  6. @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 😛

  7. 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 😉

  8. Dein Blog ist gut aufgebaut und wirkt ansprechend. Vor allem dieser Artikel hier hat mir viel gebracht, (siehe Entities), keep on going!

  9. 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.

  10. 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.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>