Alles Wissenswerte über

HTML für WordPress

zurück zum Blog-Lexikon

HTML ist ein schriftlicher Bauplan für eine Internetseite.

1. Was bedeutet HTML und wie funktioniert es?

HTML ist die Abkürzung für HyperText Markup Language. Ausgeschrieben wird auch klar, worum es sich eigentlich handelt: HTML ist eine Sprache. Eine Sprache, die Webbrowser, wie Google Chrome, Mozilla Firefox oder der Internet Explorer, lesen können.

Wenn dir ein Browser eine Seite mit Texten, Bildern und Videos anzeigt, liegt dahinter ein HTML-Dokument, das aus Befehlen besteht, die in etwa so aussehen:

<figure>
<img src="BlogWings.gif" alt="Bild von zwei Personen am Strand">  <figcaption>Das Bild enthält die Quellenangabe src="link" und einen alt-Text.</figcaption><figure>
</figure>

HTML strukturiert eine Webseite, sagt, wo welche Überschrift steht und wo Bilder abgelegt sind, die dem Seitenbesucher angezeigt werden.

Einfacher gesagt ist HTML ein schriftlicher Bauplan für eine Internetseite. Neben HTML gibt es noch andere Sprachen wie CSS und PHP, die aber mehr der visuellen Formatierung dienen. Sie bestimmen, WIE GENAU eine Seite DARGESTELLT wird und bestimmen damit den stylischen Putz am HTML-Rohbau.

Anders als häufig angenommen, ist HTML daher aber keine Programmiersprache, sondern eine "Strukturiersprache" (mehr dazu hier).

2. Brauche ich HTML für WordPress?

Nein. Und das ist die Revolution, die WordPress oder andere Content Management Systeme geschafft haben: WordPress macht Programmierkenntnisse theoretisch überflüssig, indem es im Hintergrund selbst den Bauplan in HTML schreibt, während du dich auf einer visuellen Fläche bewegen kannst.

Deutlich wird das zum Beispiel im Text-Editor von WordPress, in dem du zwischen visuellem und HTML-Editor wechseln kannst: Gibst du einen Text mit Überschriften, Bildern und anderen Elementen ein, erscheint er direkt so, wie du ihn später sehen wirst (auch WYSIWYG-Editor genannt - WYSIWYG steht dabei für "What You See Is What You Get"). Klickst du nun rechts oben auf „Text“, siehst du, welcher HTML-Code dieser Strukturierung eigentlich zugrunde liegt.

html in wordpress visual editor
html in wordpress texteditor

3. Anwendungsfälle für HTML in WordPress

HTML-Wissen ist im Umgang mit WordPress nicht zwingend notwendig. Es kann aber hilfreich sein, um Anpassungen außerhalb des Text-Editors vorzunehmen oder erweiterte Funktion einzubinden, die WordPress standardmäßig nicht abdeckt. Einige Beispiele dafür werden in der Folge beleuchtet.

Doch Vorsicht: Solange du dich nicht sicher fühlst, solltest du nicht in den Rohbau deiner Homepage eingreifen und HTML-Elemente verändern. Das könnte dazu führen, dass Webbrowser und Webserver die Informationen nicht mehr lesen können.

HTML für Texte (Formatierungen)

HTML kann genutzt werden, um einen Text auf besondere Weise darzustellen. Verfasst du Beiträge oder Texte in Seiten kannst du auf den Text-Editor zurückgreifen. Doch willst du zum Beispiel Text in einem HTML-Widget anpassen, hilft HTML. Hier eine Reihe gängiger Formatierungen:

HTML

Effekt

Darstellung

<b>Text</b>

fetten

Text

<em>Text</em>

kursiv

Text

<u>Text</u>

unterstrichen

Text

<a href="https://link">Text </a> 

Link

<code>Text</code>

Code

Text

<span style="color: #ff6600;">Text </span>

Farbe (HEX)

Text

HTML für Multimedia-Inhalte

HTML kann unter anderem Grafiken, Audio, Video, iFrames und andere Embedds (Einbettungen) einbinden.

Willst du z. B. ein YouTube-Video in deinen Artikel einbauen, kannst du ein HTML-Schnipsel von YouTube verwenden. Dafür klickst du auf der Seite des Videos auf "Teilen" und "Einbetten":

Youtube HTML Video Embedd

In der folgenden Ansicht kannst du den HTML-Code rechts kopieren und in deine ​WordPress Seite oder deinen Beitrag einfügen (HTML-Editor).

html youtube video iframe embedd

Der HTML-Code sieht wie folgt aus und sorgt dafür, dass das Video als iFrame auf der Seite ausgespielt wird. Das bedeutet, die Webseite ist nur der Rahmen (engl. frame) für das Video - der Inhalt wird über YouTube gestreamed: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/UJkxFhFRFDA?rel=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

Die Einbettung des Videos wird folgendermaßen dargestellt:

Warum Embedds hilfreich sind und wie du viele weitere Formate von Facebook, Instagram, Spotify und Co. in WordPress einbettest, lernst du in "Inhalte von Facebook, Twitter, YouTube und Co. in WordPress einbetten".

HTML-Code für Formulare

Formulare können ebenfalls über HTML-Schnipsel eingebunden werden. Der folgende Code ermöglicht es z. B., dass du dich für unsere E-Mail-Newsletter anmeldest (anklicken zum öffnen):

HTML-Code für Newsletter-Registrierung von MailChimp

Der Code sorgt für die folgende Darstellung und ein funktionierendes HTML-Formular:

Solltest du dich für unseren E-Mail-Newsletter anmelden, bestätige deine Anmeldung bitte in der E-Mail, die dir gesendet wird.

HTML-Codes in Widgets

Widgets bieten ebenfalls die Möglichkeit, HTML-Code zu nutzen, um sie individuell und ohne die Nutzung von Plugins anzupassen. 

Das HTML-Widget ist ein Alleskönner, das alle Arten von Inhalten abbildet, die mithilfe von HTML dargestellt werden können und in das Format des Widgets passen - Beispiele sind die oben genannten HTML-Inhalte, Werbe-Banner, Buttons usw.

Ein hilfreicher visueller Editor für alle Blog-Betreiber ohne HTML-Kenntnisse ist das Black Studio TinyMCE Widget - Plugin, indem die Widget-Inhalte wie im Texteditor designed werden können:

Black Studio TinyMCE Widget
Black Studio TinyMCE Widget
Entwickler: Black Studio
Preis: Kostenlos

HTML für die Suchmaschinenoptimierung

Suchmaschinen lesen den HTML-Text von Webseiten aus, um eine Reihe von Informationen zu gewinnen. Dazu gehören zum Beispiel das Title Tag und die Meta Description, die von Google auf den Suchergebnisseiten dargestellt werden.

Für die Übersichtsseite für unser Blog Lexikon sehen Title Tag und die Meta Description zum Beispiel so aus:

<title>​​​​Das große Blog-Lexikon von Blog Wings</title>


<meta name="description" content="Im Blog Lexikon von Blog Wings findest du alle Begriffe rund um das Thema Blog ausführlich und verständlich erklärt. Schau vorbei!"/>

Das Suchergebnis auf der Suchergebnisseiten von Google wird so dargestellt: 

google snippet google serp title tag und meta description

Dank hilfreichen Plugins, wie z. B. Yoast SEO, müssen die SEO-relevanten Elemente allerdings nicht selbst mit HTML angepasst werden. In unserem Online Kurs "Blog Ausbau" zeigen wir dir, wie du deinen Blog erfolgreich suchmaschinenoptimierst.

In diesem YouTube-Video von Solopreneurin Jessica Ebert siehst du einige der Anwendungsfälle von HTML in WordPress in Action:

4. Wo kann ich HTML lernen?

Ein paar Basics kannst du dir gut bei Self HTML Wiki beibringen. Hier gibt es Tutorials, Glossare und viele weitere spannende Infos zum Thema HTML.

Verschiedene Befehle lernst du durch die Zeit ganz automatisch. HTML ist eine logische Sprache und funktioniert deshalb immer nach dem gleichen Muster – das Rumprobieren kann also auch viel Spaß machen!

Weitere spannende Inhalte zum Thema HTML in WordPress

Bock auf einen eigenen blog?

Dann starte mit unserem kostenlosen Online-Schnupperkurs "Blogger werden" in dein Blog-Abenteuer:

Autor

BENNET POLENZ


Co-Founder bei Blog Wings und Online Marketing Stratege. Hat bereits Marken wie BRAVO, Cosmopolitan, InTouch und Wunderweib zu mehr Wachstum verholfen.

>