HTML - im Lexikon erklärt

Inhaltsverzeichnis

Was bedeutet HTML und wie funktioniert es?

HTML steht für “HyperText Markup Language”. Sobald die Abkürzung ausgeschrieben wird, ist es auch klar, wofür es steht: Es ist eine Sprache, die für Webbrowser konzipiert ist und von diesen gelesen werden kann – betrifft Google Chrome, Mozilla Firefox oder auch Internet Explorer.

Du siehst die HTML-Sprache nicht, wenn du dich auf einer Seite befindest. Du siehst nur das Ergebnis davon: Zum Beispiel hast du auf einer Webseite Texte, Bilder und Videos vor dir. In Wahrheit liegt dahinter aber ein HTML-Dokument aus verschiedenen Befehlen.

Der HTML-Code sieht ungefähr so aus:

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

Durch HTML entsteht Struktur auf einer Webseite, welche genau aussagt, wo die Überschrift steht und wo sich die Bilder befinden.

Anders und knapper gesagt ist HTML ein schriftlicher Bauplan für eine Internetseite. HTML ist nicht die einzige Sprache, da noch jene wie CSS oder PHP bestehen, die über noch mehr visuelle Formatierungen verfügen. Über sie wird genau bestimmt, wie eine Seite dargestellt wird und dienen als Vorlage für den HTML-Rohbau.

Ein üblicher Fehler von Unwissenden ist die Annahme, dass HTML eine Programmiersprache sei. Das ist sie aber nicht, sondern eine “Strukturiersprache” (mehr Infos dazu hier).

Brauche ich HTML für WordPress?

Glücklicherweise nicht. Das ist eine der besten Innovationen in der Internetgeschichte. Durch Content Management Systeme wie WordPress wird HTML nicht mehr “benötigt”, um Webseiten zu erstellen. Das System übernimmt den Bauplan in HTMl und bringt dir die Möglichkeit, dass du auf einer visuellen Oberfläche arbeitest. Du musst dich somit überhaupt nicht mit HTML auskennen.

In dem Text-Editor von WordPress wird das noch deutlicher. Dort kannst du zwischen zwei verschidenen Modi aussuchen: Visueller- und HTML-Editor. Wenn du zum Beispiel einen Text mit Überschriften, Bildern und anderen Elementen eingibst, dann erscheint direkt das Ergebnis, wie du es auch auf der Webseite sehen würdest (auch WYSIWYG-Editor genannt -WYSIWYG = “What You See Is What You Get” = “Was du siehst, ist was du bekommst”). Wenn du dann oben rechts auf “Text” klickst, siehst du den gesamten HTML-Code, welcher für die Darstellung zuständig ist.

Anwendungsfälle für HTML in WordPress

Obwohl du HTML-Wissen im Umgang mit WordPress nicht zwingend benötigst, kann es dennoch hilfreich sein, wenn du Anpassungen außerhalb des Text-Editor vornehmen oder erweiterte Funktionen einbinden möchtest. Diese sind bei WordPress nicht standardmäßig abgedeckt. In den folgenden Beispielen wird dir das deutlich.

Achtung: Wenn du dich nicht mit HTML auskennst, solltest du auf keinen Fall Veränderungen am Rohbau deiner Homepage vornehmen. Das könnte die gesamte Homepage beschädigen und somit nicht mehr lesbar sein.

HTML für Texte (Formatierungen)

HTML wird normalerweise genutzt, um im einem Texte besondere Passagen unterschiedlich darzustellen. Darunter befinden sich zum Beispiel typische Formatierungen wie: Fettschrift, kursiv, unterstrichen, Link, Code, Farbe. Wenn du das in einem HTML-Widget machen möchtest, musst du dafür HTML verwenden. Hier sind die Codes für die gängigen 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	Text
<code>Text</code>	Code	`Text`
<span style=”color: #ff6600;”>Text </span>	Farbe (HEX)	Text

HTML für Multimedia-Inhalte

Mit HTML können auch Grafiken, Audio, Videos, iFrames und andere Embedds (Einbettungen) eingebunden werden.

Wenn du zum Beispiel ein YouTube-Video in deinen Beitrag einbinden möchtest, kannst du dafür den HTML-Code von dem YouTube-Video nutzen. Dafür musst du beim Video auf YouTube auf “Teilen” und anschließend auf “Einbetten” klicken:

Anschließend kannst du den HTML-Code rechts kopieren und in deinem WordPress-Beitrag im HTML-Editor einfügen.

Sobald du dies getan hast, wird das Video als iFrame auf der Seite angezeigt und ausgespielt. Mit anderen Worten bedeutet dies, dass die Webseite nur einen Rahmen (englisch “frame”) für das Video hat und der Inhalt über YouTube gestreamed wird:

Die Einbettung des Videos wird so dargestellt:

Einbindungen sind sehr wichtig und spielen eine essenzielle Rolle in Beiträgen, welche du aus Formaten von Facebook, Instagram, Spotify, YouTube und Co. beziehen kannst. Warum das so wichtig ist, lernst du in “Inhalte von Facebook, Twitter, YouTube und Co. in WordPress einbetten”.

HTML-Code für Formulare

Mit HTML-Schnipseln können auch Formulare eingebunden werden. Durch den Code wird dir zum Beispiel ermöglicht, dass du dich für unsere E-Mail-Newsletter anmelden kannst (zum Öffnen anklicken):

HTML-Code für Newsletter-Registrierung von MailChimp

Der Code sorgt dafür, dass Folgendes dargestellt wird 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

Darüber hinaus bieten auch Widgets die Möglichkeit, um HTML-Codes zu nutzen und diese ohne die Nutzung von Plugins anzupassen.

Das HTML-Widget ist ein Helfer in allen Fällen. Damit können alle Arten von Inhalten abgebildet und in HTML dargestellt werden. Natürlich, wenn sie in das Format des Widgets passen. Konkrete Beispiele sind die oben genanten HTML-Inhalte, Buttons, Werbe-Banner und Co.

HTML für die Suchmaschinenoptimierung

Suchmaschinen arbeiten über den HTML-Text von Webseiten. Sie gewinnen ihre Informationen dadurch, um die Seiten anschließend zu ranken. Dazu gehören auch die Informationen über das Title Tag und die Meta Description, die ebenfalls bei Suchmaschinenergebnissen dargestellt werden.

Bei der Übersichtsseite für unser Blog Lexikon sieht das mit dem Title Tag und der Meta Description zum Beispiel wie folgt aus:

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

Das Suchergebnis auf der Suchergebnisseiten von Google wird so dargestellt:

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.

Im folgenden YouTube-Video von der Solopreneurin Jessica Ebert erfährst du über noch mehr Anwendungsfälle von HTML in WordPress und kannst dadurch noch genauer sehen, wie es in Anwendung funktioniert:

4. Wo kann ich HTML lernen?

Die Basics von HTML kannst du dir relativ schnell selbst aneignenm in dem du es zum Beispiel bei Self HTML Wiki lernst. Dort bestehen verschiede Tutorials, Glossare und weitere Möglichkeiten zum Erlernen von HTML. Darüber hinaus kannst du auch einfach YouTube nutzen, wo viele verschiedene Experten die Basics von HTML erklären.

Andere Befehle lernst du mit Sicherheit über die Zeit ganz automatisch. Es ist eine Sache von “Learning by Doing”. Je öfter du etwas anwendest, desto klarer bleibt dir das auch im Kopf. HTML ist eine sehr logische Sprache, wodurch ein gewisses Muster besteht – wenn das Muster irgendwann verstanden wird, funktioniert die Sprache ganz von alleine. Probier einfach ein wenig rum und hab Spaß dabei!

Weitere spannende Inhalte zum Thema HTML in WordPress

Beginners guide to using the WordPress HTML text editor