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:
Text mit normalen Leerzeichen:
fix & fertig
<p>fix &amp; fertig</p>
Text mit Non-Breaking Space:
fix & fertig
<p>fix&nbsp;&amp;&nbsp;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 einen Wortumbruch an einer bestimmten Stelle zu erzeugen.
&shy;
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&shy;schiff&shy;fahrts&shy;gesell&shy;schafts&shy;kapitän
Dampfschifffahrtsgesellschaftskapitän
Dampfschifffahrts&shy;gesellschafts&shy;kapitän
Dampfschifffahrtsgesellschaftskapitän
Und hier noch das Beispiel inmitten eines Satzes:
Es braucht einen Dampfschifffahrtsgesellschaftskapitän auf Dampfschiffen.
Urheberechtssymbol (Copyright Zeichen)
©
&copy;
Copyright-Zeichen (Urheberechtssymbol)
&
&amp;
&-Zeichen
Praktische Beispiele für häufige HTML-Sonderzeichen
| Zeichen | HTML-Code | Bedeutung |
|---|---|---|
| & | & | kaufmännisches Und (Ampersand) |
| < | < | Kleiner als |
| > | > | Größer als |
| „ | " | Doppelte Anführungszeichen |
| ‚ | ' | Einfache Anführungszeichen |
| © | © | Copyright-Symbol |
| € | € | Euro-Symbol |
| ® | ® | Registered Trademark |
| ™ | ™ | Trademark |
| (geschütztes Leerzeichen) | | Kein Zeilenumbruch |
HTML Text formatieren
Nun hast du erfahren, wie du einzelne Sonderzeichen korrekt darstellen kannst. Damit du diese in einer korrekten Struktur im Text unterbringst, sollst du noch kurz einige HTML-Tags kennenlernen.
Bold vs. Strong
Mit einem Klick auf das große „B“ in der Formatierung wird dein Text gefettet. Du kannst dies auch über den Tastendruck „Ctrl + B“ auslösen. Im Hintergrund wird um den markierten Text eine HTML-Formatierung eingefügt. Leider verwendet WordPress hier den HTML-Tag strong, was streng genommen nicht immer korrekt ist.
Denn <strong> besitzt eine semantische Funktion: Es kennzeichnet Text als besonders wichtig oder bedeutend im Kontext des Inhalts. Das ist vor allem für Suchmaschinen, Screenreader und andere assistive Technologien relevant, da sie so erkennen können, dass dieser Text hervorgehoben werden soll.
Betrachtest du dir nur den gefetteten Text eines Inhaltes, solltest du dadurch eine inhaltliche Zusammenfassung erhalten!
Im Vergleich hierzu steht <b> ausschließlich für die visuelle Hervorhebung. Es signalisiert dem Browser, dass der Text fett dargestellt werden soll, ohne eine besondere inhaltliche Bedeutung zu vermitteln. Insbesondere bei Legenden und Listenpunkten ist dieses visuelle Mittel hilfreich. Die folgenden Fettschreibungen sind daher mittels HTML-Tag <b> ausgezeichnet.
Die praktischen Auswirkungen sind groß:
- Für Barrierefreiheit (Accessibility): Screenreader lesen Text in
<strong>-Tags mit besonderer Betonung vor, während sie bei<b>-Tags nur den Stil, nicht aber die Wichtigkeit erkennen. - Für Suchmaschinenoptimierung (SEO): Suchmaschinen können
<strong>-Tags als Signal für wichtige Schlüsselwörter oder Kernaussagen interpretieren, während<b>keine solche Bedeutung hat. - Für die Gestaltung: Wenn du nur das Aussehen ändern möchtest, solltest du stattdessen besser CSS verwenden (z. B.
font-weight: bold;).<strong>sollte nur für wirklich wichtige Inhalte genutzt werden.
| Tag | Optische Wirkung | Bedeutung (Semantik) | Einsatzempfehlung |
|---|---|---|---|
<b> | Fett | Keine (nur Stil) | Für rein optische Hervorhebung |
<strong> | Fett | Wichtiger, bedeutender Text | Für inhaltlich wichtige Aussagen |
Da mich diese WordPress-Unzulänglichkeit schon eine Weile nervt und ich zur Anpassung in die HTML-Ansicht wechsle, musste eine praktischere Lösung her. Also wurde diese Formatierungsleiste kurzerhand um eine visuelle Fettschreibung ergänzt.
Die Funktion wird von einer 25-zeiligen JS-Datei mit dem Namen: custom-richtext-formats.js. Der Inhalt sieht wie folgt aus.
const { registerFormatType, toggleFormat } = wp.richText;
const { RichTextToolbarButton } = wp.blockEditor || wp.editor;
const { createElement } = wp.element;
// Neues Format <b> hinzufügen
registerFormatType('custom-format/b-tag', {
title: 'B fett (visuell)',
tagName: 'b',
className: null,
edit({ isActive, value, onChange }) {
return createElement(
RichTextToolbarButton,
{
icon: 'editor-bold',
title: 'B fett (visuell)',
onClick: () => {
onChange(toggleFormat(value, {
type: 'custom-format/b-tag'
}));
},
isActive,
}
);
}
});
Die Datei liegt bei uns im Child-Theme unter /assets/js/ und muss über die functions.php noch angemeldet werden. Hierfür genügen ebenfalls wenige Zeilen Code:
/************************************
Bold vs. Strong
************************************/
function mein_custom_format_enqueue() {
wp_enqueue_script(
'custom-richtext-formats',
get_stylesheet_directory_uri() . '/assets/js/custom-richtext-formats.js',
array('wp-rich-text', 'wp-element', 'wp-editor'),
false,
true
);
}
add_action('enqueue_block_editor_assets', 'mein_custom_format_enqueue');
Listentypen
HTML bietet drei grundlegende Listentypen, mit denen du Inhalte strukturiert und übersichtlich darstellen kannst. Ungeordnete Listen (<ul>) und geordnete Listen (<ol>) können über den Editor abgerufen werden. Diese können zudem verschachtelt werden. Allerdings kennen die wenigsten Definitionslisten (<dl>). Diese kannst du verwenden, wenn Begriffe erklärt oder Zuordnungen geschaffen werden sollen.
| Listentyp | Tag(s) | Zweck | Darstellung |
|---|---|---|---|
| Ungeordnete Liste | <ul>, <li> | Aufzählung ohne Reihenfolge | Bullets |
| Geordnete Liste | <ol>, <li> | Aufzählung mit Reihenfolge | Nummerierung |
| Definitionsliste | <dl>, <dt>, <dd> | Begriffe und Erklärungen | Begriff + Erklärung |
Absätze und Textstruktur
Sogar bei der Erstellung von Absätzen kann es zu semantischen Unklarheiten kommen. So ist <p> semantisch als Absatz ausgezeichnet, <div> dagegen ist rein strukturell und hat keine inhaltliche Bedeutung. Dadurch verbessert der semantische Absatz die Zugänglichkeit für Algorithmen (Suchmaschinen, KI-Systeme), ein <div> trägt nicht zum besseren Verständnis bei.
<br>: Für einen einfachen Zeilenumbruch innerhalb eines Absatzes, aber kein neuer Absatz4.<pre>: Für vorformatierten Text, bei dem Zeilenumbrüche und Leerzeichen erhalten bleiben (z.B. bei Gedichten oder Code).<hr>: Fügt eine horizontale Linie ein, um Abschnitte oder Themen zu trennen, aber kein eigentlicher Absatz4.- Semantische Container wie
<section>,<article>,<aside>,<main>: Dienen zur Gliederung größerer Inhaltsbereiche, aber nicht speziell für einzelne Absätze.
Quellen und Fußnoten