Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

Was ist: HTML

HTML steht für 'HyperText Markup Language' und ist der Code, der zur Definition aller Seiten im World Wide Web verwendet wird. Er teilt Webbrowsern mit, wie der Inhalt auf Webseiten angezeigt werden soll.

Obwohl es praktisch ist, HTML zu verstehen, ist es für die Erstellung einer WordPress-Website nicht erforderlich.

Das Wissen, wie man HTML bearbeitet, kann jedoch für fortgeschrittene Anpassungen und die Fehlerbehebung hilfreich sein.

Glossareintrag für HTML

Was ist HyperText Markup Language (HTML)?

Jede Webseite wird mit HTML-Code erstellt, und normalerweise auch mit CSS und JavaScript-Code. Das macht HTML für alle Websites sehr wichtig.

Wir haben bereits erwähnt, dass HTML für 'HyperText Markup Language' steht. Lassen Sie uns das aufschlüsseln:

  • HyperText bedeutet, dass Sie Links zu Ihren Webseiten hinzufügen können. Diese Links können Sie zu verwandten Seiten auf Ihrer eigenen Website oder zu anderen Websites führen. Sie ermöglichen es Ihnen auch, von einem Teil der aktuellen Seite zu einem anderen zu springen.
  • Markup bezieht sich auf spezielle Codes oder Tags, mit denen Sie verschiedene Teile Ihres Dokuments beschreiben oder definieren können. Sie geben Anweisungen, wie der Text angezeigt werden soll oder um welche Art von Inhalt es sich handelt.

Kurz gesagt, HTML ist eine Sprache, die verwendet wird, um die grundlegende Struktur einer Webseite zu erstellen.

Beispiele für HTML-Code

HTML-Markup verwendet ein System von Tags, die in spitzen Klammern eingeschlossen sind. Diese Tags definieren verschiedene Elemente wie Absätze, Überschriften, Links, Bilder und mehr.

Hier sind einige Beispiele.

Jeder Absatz auf einer Webseite ist von Absatz-Tags wie diesem umgeben:

<p>This is a paragraph of text in HTML.</p>

Sie können auch HTML-Tags verwenden, um bis zu 6 Ebenen von Überschriften auf Ihrer Website zu erstellen, wie hier:

<h1>This Is a Main Heading</h1>
<h2>This Is a Subheading</h2>

Sie können Links in HTML mit Anker-Tags wie diesem erstellen:

<a href="https://www.example.com">click on this anchor text</a>

Sie können auch Bilder mit HTML zu einer Webseite hinzufügen, indem Sie die URL des Bildes und eine Beschreibung wie diese angeben:

<img src="image.jpg" alt="A description of the image">

HTML-Markup kann für Anfänger schwierig aussehen. Sie fragen sich vielleicht, ob Sie HTML verstehen müssen, bevor Sie eine Website erstellen können.

Müssen Sie HTML verstehen, um eine WordPress-Website zu erstellen?

In den frühen Tagen des Internets war es üblich, statische Websites mit HTML-Code zu erstellen. Aber das ist nicht mehr der Fall.

Die meisten Websites werden heute mit einem Website-Builder erstellt, ohne dass HTML-Code verstanden werden muss. WordPress ist der beliebteste Website-Builder und treibt 43 % aller Websites an.

Anstatt Sie zu zwingen, komplexe HTML-Tags zu verwenden, um Absätze, Überschriften und mehr zu erstellen, bietet WordPress einen einfach zu bedienenden Block-Editor.

Dies ermöglicht es Ihnen, eine Webseite zu erstellen, indem Sie Blöcke in den Inhaltsbereich ziehen. Zum Beispiel gibt es Blöcke für Absätze, Überschriften, Listen, Bilder und vieles mehr.

Block-Editor

Eine weitere Möglichkeit, Webseiten in WordPress zu erstellen, ist die Verwendung eines Drag-and-Drop Seiten-Builder-Plugins. Mit diesen Tools können Sie benutzerdefinierte WordPress-Website-Designs erstellen, ohne Code schreiben zu müssen.

SeedProd ist das beste Page-Builder-Plugin auf dem Markt und ermöglicht es Ihnen, ganz einfach benutzerdefinierte Seiten wie Landing Pages, Coming-Soon-Seiten und sogar komplette benutzerdefinierte WordPress-Themes zu erstellen.

Hinzufügen einer Überschrift zu einer benutzerdefinierten Landingpage

Ob Sie den WordPress Block-Editor oder ein Page-Builder-Plugin verwenden, der benötigte HTML-Code für Ihre Website wird automatisch im Hintergrund für Sie erstellt.

Mehr über Website-Builder im Vergleich zum Programmieren einer Website von Grund auf erfahren Sie in unserem Leitfaden unter How to Code a Website (Complete Beginner’s Guide).

Hinzufügen oder Bearbeiten von HTML-Code in WordPress

Obwohl Sie kein HTML verstehen müssen, um eine Website zu erstellen, kann etwas HTML-Wissen nützlich sein, wenn Sie Probleme auf Ihrer Website beheben oder erweiterte Anpassungen vornehmen.

Wenn Sie den WordPress-Block-Editor verwenden, können Sie den HTML-Code für einen bestimmten Block anzeigen und bearbeiten, indem Sie im Drei-Punkte-Menü „Als HTML bearbeiten“ auswählen.

Wählen Sie die Option „Als HTML bearbeiten“ aus dem Dropdown-Menü „Optionen“ in der Block-Symbolleiste

Es ist auch einfach, neuen HTML-Code zu einem Beitrag oder einer Seite hinzuzufügen.

Ziehen Sie einfach einen benutzerdefinierten HTML-Block in den Inhaltsbereich und fügen Sie dann Ihren HTML-Code hinzu.

Fügen Sie den Discord-Widget-Shortcode in den HTML-Block ein

Sie können mehr in unserem Leitfaden erfahren, wie Sie HTML im WordPress-Code-Editor bearbeiten.

Eine weitere Möglichkeit, HTML-Code auf Ihrer Website zu verwenden, besteht darin, Sonderzeichen wie das Copyright- oder Warenzeichen-Symbol hinzuzufügen.

Sie bearbeiten einfach das HTML des Blocks und geben dann &copy; ein, um ein Copyright ©-Symbol hinzuzufügen, oder &trade;, um das Warenzeichen ™-Symbol hinzuzufügen.

Sehen Sie sich unseren Leitfaden an, wie Sie Sonderzeichen in WordPress-Beiträgen hinzufügen, um mehr zu erfahren.

Sie sind vielleicht auch neugierig auf den HTML-Code, der auf anderen Websites verwendet wird. Moderne Webbrowser wie Google Chrome und Mozilla Firefox verfügen über integrierte Tools, mit denen Sie den HTML- und CSS-Code hinter einer Webseite untersuchen können.

HTML und CSS inspizieren

Dies kann nützlich sein, wenn Sie Inspiration für Ihre eigene Website suchen. Sie können auch sicher mit der Bearbeitung des Codes experimentieren, da dies nur beeinflusst, wie die Website in Ihrem eigenen Webbrowser angezeigt wird.

Details finden Sie in unserem Leitfaden zu den Grundlagen des Inspect Elements.

Was ist der Unterschied zwischen HTML und CSS?

Wir haben erwähnt, dass moderne Webbrowser es Ihnen ermöglichen, den HTML- und CSS-Code hinter jeder Webseite zu inspizieren. Sie fragen sich vielleicht, was der Unterschied zwischen den beiden Codearten ist.

HTML definiert die Struktur und den Inhalt einer Webseite, aber nicht, wie diese Elemente aussehen. Das ist die Aufgabe von CSS, was für 'Cascading Style Sheets' steht.

CSS ist eine Sprache, die Ihnen hilft, Ihre Website zu gestalten. Zum Beispiel teilt sie dem Webbrowser des Benutzers mit, welche Hintergrundfarbe die Seite hat, welche Farbe und Größe die Überschriften und der Absatztext haben sollen, wie der Text ausgerichtet werden soll und vieles mehr.

Das von Ihnen gewählte WordPress-Theme bestimmt das CSS, das für Ihre Website verwendet wird. Sie können jedoch das Erscheinungsbild Ihrer Website ändern, indem Sie den CSS-Code anpassen.

Mehr erfahren Sie in unserem Leitfaden wie Sie ganz einfach benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzufügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen, mehr über HTML in WordPress zu erfahren. Möglicherweise möchten Sie auch unsere Liste mit zusätzlichen Lektüren unten für verwandte Artikel über nützliche WordPress-Tipps, Tricks und Ideen sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Zusätzliche Lektüre

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!