Aktualisiert im Oktober 2026 (WordPress 7.1): Ich habe den Beitrag überarbeitet und erklärt, wie HTML mit WordPress zusammenspielt.
HTML steht für Hypertext Markup Language. Auf Deutsch etwa: Auszeichnungssprache für Hypertext. Klingt kompliziert, ist im Grunde aber ganz logisch.
Mit HTML wird beschrieben, was auf einer Webseite was ist: Das hier ist eine Überschrift, das ein Absatz, das ein Bild, das ein Link. Jede Webseite, die Du im Browser öffnest, besteht aus HTML. Auch Deine WordPress-Website.
Eine Sprache, aber keine Programmiersprache
In meinem alten Beitrag hatte ich HTML als Programmiersprache bezeichnet. Ganz genau genommen stimmt das nicht. HTML ist eine Auszeichnungssprache: Sie beschreibt den Aufbau einer Seite, rechnet aber nichts aus und trifft keine Entscheidungen.
Damit eine Website schön aussieht und etwas kann, arbeiten mehrere Sprachen zusammen:
- HTML gibt die Struktur vor: Überschrift, Absatz, Bild, Link.
- CSS sorgt für das Aussehen: Farben, Schriften, Abstände.
- JavaScript macht die Seite interaktiv, zum Beispiel bei einem Slider oder Menü.
PHP arbeitet auf dem Server. WordPress baut damit aus Deinen Inhalten in der Datenbank das HTML zusammen, das der Browser bekommt.
So sieht HTML aus
HTML arbeitet mit sogenannten Tags, also Markierungen in spitzen Klammern. Fast jedes Element hat ein öffnendes und ein schließendes Tag:
- <h2>Das ist eine Überschrift</h2>
- <p>Das ist ein Absatz.</p>
- <strong>fett</strong> macht ein Wort fett.
- <a href=“https://bianca-buerger.info“>Link</a> ist ein Link.
Das Prinzip ist immer gleich: Es beginnt mit <Befehl> und endet mit </Befehl>. Ausnahmen gibt es auch, zum Beispiel <br> für einen Zeilenumbruch. Der braucht kein schließendes Tag.
Fett, kursiv und Links begegnen Dir am häufigsten. Dabei gibt es feine Unterschiede: <strong> und <em> sagen auch Screenreadern, dass etwas wichtig oder betont ist. <b> und <i> ändern nur das Aussehen. Und ein Link kann nicht nur auf eine Seite zeigen, sondern mit mailto: das E-Mail-Programm öffnen oder mit tel: am Handy eine Nummer wählen.
Warum die Überschriften-Hierarchie wichtig ist
Überschriften gibt es in sechs Stufen, von <h1> bis <h6>. Sie sind nicht dafür da, Text groß zu machen, sondern um Deinen Inhalt zu gliedern wie ein Inhaltsverzeichnis:
- Eine H1 pro Seite, meistens der Titel.
- Darunter H2 für die Hauptabschnitte, H3 für Unterpunkte.
Das hilft Menschen, die mit einem Screenreader unterwegs sind, und es hilft Suchmaschinen, Deine Seite zu verstehen. Soll eine Überschrift kleiner aussehen, ändere die Schriftgröße im Design, nicht die Stufe.
Wo begegnet Dir HTML in WordPress?
Auch wenn Du HTML nie selbst schreibst: Du kannst es Dir jederzeit ansehen.
- Block-Editor: In der Werkzeugleiste eines Blocks findest Du über die drei Punkte „Als HTML bearbeiten“. Zurück geht es mit „Visuell bearbeiten“. Den ganzen Beitrag als Code siehst Du im Code-Editor, den Du über die drei Punkte oben rechts oder mit Strg+Umschalt+Alt+M öffnest.
- Classic-Editor: Hier gibt es die Reiter „Visuell“ und „Text“. Im Reiter „Text“ siehst Du das HTML.
- Divi: Im Text-Modul kannst Du von der visuellen Ansicht in eine Code-Ansicht wechseln.
Für eigenen HTML-Code gibt es im Block-Editor außerdem den Block „Individuelles HTML“
Bild 01-02
Im Classic-Editor findest Du die Reiter „Visuell“ und „Text“. Normalerweise ist „Visuell“ vorausgewählt.
Hast Du – wie in diesem Beispiel – eine Überschrift markiert, wirst Du in der Text-Ansicht sehen, dass dieser Text mit dem entsprechenden Tag versehen ist.
Bild 03-04
Auch im Gutenberg-/Block-Editor ist die Visuelle Bearbeitung voreingestellt. Um zur Text-Ansicht zu wecheln, musst Du im Block selbst auf „als HTML bearbeiten“ klicken.
Zurück kommst Du, wenn Du auf „visuell bearbeiten “ klickst.
Bild 05-06
Der Divi-Builder ist hier dem Classic-Editor angepasst und verhält sich letztlich genauso. Per Klick auf den Text-Tab kommst Du in die HTML-Bearbeitung. Übrigens: Wenn Du Dir im Code-Editor einen Beitrag ansiehst, entdeckst Du Kommentare wie . So merkt sich WordPress, welcher Block was ist. Die solltest Du nicht löschen.
Meine Tipps aus dem Alltag
Saubere Silbentrennung mit ­
Hast Du ein langes Wort in einer Überschrift, trennt der Browser es manchmal ungünstig oder gar nicht. Ein Beispiel: „Expertenwissen“. Wechselst Du in die HTML-Ansicht und schreibst „Experten­wissen“, wird das Wort genau an dieser Stelle getrennt, aber nur, wenn es nötig ist. Ist genug Platz, siehst Du von dem ­ nichts.
Zusammenhalten mit
Das Gegenstück ist das geschützte Leerzeichen . Schreibst Du „10 €“, landen Zahl und Euro-Zeichen nie getrennt auf zwei Zeilen.
Als reinen Text einfügen
Kopierst Du Text aus Word oder einer Website, wandert oft unsichtbarer HTML-Ballast mit. Füg ihn deshalb mit Strg+Umschalt+V (am Mac Cmd+Umschalt+V) als reinen Text ein. Dann bleibt Dein Design sauber.
Fazit
HTML ist die Sprache hinter jeder Webseite. Du musst sie nicht beherrschen, um mit WordPress zu arbeiten. Ein paar Tags zu kennen, hilft Dir aber, Probleme zu verstehen und kleine Dinge selbst zu lösen.
0 Kommentare