HTML-Sonderzeichen für den täglichen Bedarf

Neben reinen WordPress-Themens soll es gelegentlich auch um nützliche Grundlagen „drumherum“ gehen, weshalb wir in diesem Beitrag einen Ausflug ins HTML und dessen Sonderzeichen wagen. Solltest du bisher keine Erfahrung damit haben, wundere dich bitte nicht, wenn du plötzlich Zeichen wie ein „&“ oder „;“ mitten im Text siehst. Es handelt sich hier lediglich um sogenannte HTML-Entitäten, welche wir nun nähern beleuchten wollen.

Es muss nicht immer eine komplexe oder gar umständliche Lösung für vermeintlich kleine Probleme genutzt werden. Hier erfährst du, wie du bei der Inhaltserstellung spezielle Formatierungen für die gewünschte Darstellung nutzen kannst. Was dir im täglichen Internet-Alltag begegnen kann, greifen wir hier kurz auf und bringen Licht ins Dunkel, damit du weißt, wann welche „Keule“ sinnvoll ist und du nicht mit „Kanonen auf Spatzen“ schießen musst.

Doch legen wir lieber mal los, bevor mir noch mehr Phrasen zur Versinnbildlichung einfallen. Worum geht es denn überhaupt?

HTML-Entitäten

Der Begriff Entität leitet sich aus dem Lateinischen ab und bedeutet soviel wie „Seiendes“ oder kann einfacher gesagt auch einfach ein „Ding“ sein. In der Informatik ist eine Entität ein eindeutig identifizierbares, einzelnes Informationsobjekt.

Die meisten Texte im Web können einfache HTML Entitäten enthalten. Also abgrenzbare Zeichenfolgen mit einer spezifischen Bedeutung. Die Abgrenzung erfolgt stets mit einem &-Zeichen zu Beginn und endet immer mit einem Semikolon. Diese helfen dir oft an der richtigen Stelle weiter, deinen Inhalt sauber und wie gewünscht zu formatieren. Und das, ohne dass du komplizierte Lösungen mittels CSS oder JavaScript finden musst.

Für die Nutzung ist die Bearbeitung in HTML notwendig (im Classic-Editor auf die Code-Ansicht umstellen oder deinen Gutenberg-Block über das Kontextmenü „Als HTML bearbeiten“ umschalten) und du kannst damit unter Anderem folgendes tun.

Profi-Tipp:
Die nachfolgenden HTML-Entitäten kannst du sogar im Titel deines Beitrages oder deiner Seite nutzen. Sprich du kannst auch ein „­“ hineinkopieren, welches das im Frontend sichtbar wird. Leider werden diese Zugaben jedoch garnicht (!) im Editor angezeigt. Ein Blick ins Frontend zeigt aber das Ergebnis und im Quellcode siehst du auch die entsprechenden Entitäten hinterlegt. Hier hinkt WordPress wohl ein wenig nach, aber es ist dennoch praktisch zu wissen, dass es trotz fehlender Anzeige auch funktioniert. 🙂

Leerzeichen, dass keinen Umbruch erzeugt
-> Geschütztes Leerzeichen (Non-Breaking Space)

Du willst Inhalte per Leerzeichen trennen, aber sie brechen immer ungünstig um, weshalb du einfach kein Leerzeichen mehr in Rufnummern benutzt? Dann solltest du dir mal das HTML-Zeichen für das sog. „Non-Breaking Space“ näher anschauen!^[1]Wikipedia: Geschütztes Leerzeichen, Zugriff: 18. August 2022

 

Der Name unserer ersten HTML-Entität ist Programm und die Zeichenfolge   ist schlicht die Abkürzung für Non-Breaking Space. Das &-Zeichen zu Beginn leitet das besondere Leerzeichen ein und das Semikolon am Ende schließt es wieder ab. Du kannst es genauso wie ein Leerzeichen benutzen. Verwende es überall, wo du ein Leerzeichen möchtest, jedoch kein Umbruch in der Ansicht erzeugt werden soll.

Beispiel:

<p>fix & fertig</p>

<p>fix & fertig</p>

Wortumbruch an bestimmter Stelle erzwingen
-> Bedingter Trennstrich (Shy Soft-Hyphen)

Auch wenn wir im CSS die Formatierung via „hyphens“ (Bindestriche) haben, um Worte automatisch umzubrechen, bin ich dennoch kein riesen Freund davon, denn in der deutsch Sprache trennen sich Worte manchmal echt unschön. Zum Glück gibt es auch dafür eine Lösung und ich liebe dieses kleine süße Ding. Es heißt auch noch „shy“ wie schüchtern. Und es wird erst dann für deine Website-Besucher sichtbar, wenn ein Wort an einer bestimmten Stelle umgebrochen werden soll. Eben ein bedingter Trennstrich, den du individuell einsetzen kannst, um ein Wortumbruch an einer bestimmten Stelle zu erzeugen.

­

Füge dazu einfach „­“ zwischen ein beliebiges Wort und es wird genau an dieser Stelle umgebrochen, sobald die Breite nicht mehr ausreicht, es in der kompletten Breite darzustellen. Es sieht auf den ersten Blick etwas unschön aus, hat aber den schönen Effekt, dass Wortumbrüche genauer bestimmt werden können.

Dampf­schiff­fahrts­gesell­schafts­kapitän

Dampfschifffahrts­gesellschafts­kapitän

Und hier noch das Beispiel inmitten eines Satzes:

Es braucht einen Dampf­schiff­fahrts­gesell­schafts­kapitän auf Dampfschiffen.

Urheberechtssymbol (Copyright Zeichen)

©

©

Copyright-Zeichen (Urheberechtssymbol)

&

&

&-Zeichen