{"id":51989,"date":"2022-07-01T11:30:19","date_gmt":"2022-07-01T10:30:19","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=51989&post_type=knowledgebase&preview_id=51989"},"modified":"2025-10-01T20:18:31","modified_gmt":"2025-10-01T19:18:31","slug":"was-ist-html","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/","title":{"rendered":"Was ist HTML? Ein Leitfaden f\u00fcr Anf\u00e4nger"},"content":{"rendered":"

Du willst deine Traum-Webseite erstellen, aber sie soll nicht wie eine vorgefertigte Vorlage aussehen. Jeder, der sich mit Webdesign<\/a> auskennt, wird dir sagen, dass du zuerst HTML kennen musst. Aber was ist HTML, und wie kannst du es lernen?<\/p>\n

Die Webseite, die du ver\u00f6ffentlichst<\/a>, soll sich abheben und originell sein. Du willst Elemente und Designs, die niemand sonst in deiner Branche verwendet. Schlie\u00dflich ist deine Webseite der erste Eindruck, den viele potenzielle Kunden von deinem Unternehmen bekommen.<\/p>\n

Aber bevor du das tun kannst, musst du eine Computersprache namens HTML<\/a> lernen. Das ist die Sprache, in der festgelegt wird, was ein Webbrowser einem Besucher zeigen soll, wenn er auf deine Webseite kommt.<\/p>\n

In diesem Artikel erkl\u00e4ren wir dir, was HTML ist, wie es entstanden ist, wie es verwendet wird, wie es funktioniert und bieten dir einen HTML-Grundkurs<\/a> mit Tipps, wie du mehr lernen kannst.<\/p>\n

Bist du bereit zu lernen, wie du deine Webseite programmieren kannst, ohne eine kaputte Seite zu erstellen? Dann fangen wir gleich an.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was ist HTML?<\/h2>\n

HTML steht f\u00fcr „Hypertext Markup Language“ und ist eine relativ einfache Sprache, mit der Webseiten erstellt werden k\u00f6nnen. Da sie keine Variablen oder Funktionen zul\u00e4sst, gilt sie nicht als „Programmiersprache“, sondern eher als „Auszeichnungssprache“, eine Sprache, die Tags verwendet, um Elemente in einem Dokument zu definieren.<\/p>\n

Wenn du jemanden aus der Welt des Webdesigns<\/a> fragst, was HTML ist, bekommst du wahrscheinlich eine langatmige Erkl\u00e4rung, bei der dir der Kopf schwirrt, vor allem, wenn du wie die meisten Menschen keine Ahnung von Programmierung und der Erstellung einer Webseite<\/a> hast.<\/p>\n

\"Vier
Vier Punkte, die HTML definieren (Quelle:<\/b> Studypool<\/a>)<\/figcaption><\/figure>\n

Was bedeutet also „Hypertext Markup Language“? Lasst es uns aufschl\u00fcsseln.<\/p>\n

Hypertext ist geordneter Text, der zusammenh\u00e4ngende Elemente miteinander verbindet, meist \u00fcber Links (auch Hyperlinks genannt). Die Auszeichnungssprache beschreibt den Stil und die Struktur einer Seite f\u00fcr Webbrowser.<\/p>\n

HTML sorgt also daf\u00fcr, dass Text und Bilder an der richtigen Stelle erscheinen und dass die Nutzer\/innen problemlos auf deiner Webseite navigieren<\/a> k\u00f6nnen. Webbrowser laden diese Informationen von deinem Webserver, um die Webseiten zu erstellen, die du jeden Tag siehst.<\/p>\n

Wenn du dir HTML in seiner Rohform ansiehst, wirst du eine Menge Symbole und Klammern sehen, die scheinbar keinen Sinn ergeben. Aber das alles tr\u00e4gt zum Endprodukt bei, das den Kunden pr\u00e4sentiert wird.<\/p>\n

Die Struktur von Webseiten wird mit HTML erstellt. Diese Sprache arbeitet mit CSS (Cascading Style Sheets) und JavaScript<\/a> zusammen, um optisch ansprechende und interaktive Webseiten zu erstellen, an denen sich die Benutzer\/innen erfreuen k\u00f6nnen.<\/p>\n

Unterm Strich ist HTML die Grundlage f\u00fcr eine gute Webseite. Ohne sie w\u00e4rst du nicht in der Lage, Text mit den Besuchern deiner Webseite zu teilen, geschweige denn, deine pers\u00f6nliche Note in die Webseite deiner Tr\u00e4ume einflie\u00dfen zu lassen.<\/p>\n\n

Die Geschichte von HTML<\/h3>\n

Sir Tim Berners-Lee schuf HTML Ende 1991, aber die Programmiersprache<\/a> wurde erst 1993 f\u00fcr die breite Masse freigegeben.<\/p>\n

Damals kam HTML1 zum ersten Mal heraus. Von Anfang an war es als Mittel zum Austausch von Daten \u00fcber Webbrowser gedacht.<\/p>\n

Das Wachstum von HTML kam kurz nach seiner Ver\u00f6ffentlichung ins Stocken, weil zu dieser Zeit nicht viele Entwickler\/innen Webseiten erstellten.<\/p>\n

HTML2 wurde 1995 mit zus\u00e4tzlichen Funktionen ver\u00f6ffentlicht und wurde bis 1997 zur Standardauszeichnungssprache f\u00fcr das Webdesign.<\/p>\n

Damals wurde HTML3 von Dave Raggett entwickelt. Es gab Webmastern mehr M\u00f6glichkeiten, um Seiten zu gestalten. Leider war sie ihrer Zeit voraus. Die Funktionen von HTML3 bremsten die Browser aus, da sie noch nicht in der Lage waren, sie anzuwenden.<\/p>\n

HTML4.01 wurde 1999 entwickelt und bot Unterst\u00fctzung f\u00fcr Multimedia-Optionen. Diese Aktualisierung umfasste auch Style Sheets, Druckfunktionen und zus\u00e4tzliche Skriptsprachen.<\/p>\n

\"Die
Die Unterschiede zwischen der HTML4-Struktur und der HTML5-Struktur (Quelle:<\/b> JavatPoint<\/a>)<\/figcaption><\/figure>\n

In j\u00fcngerer Zeit wurde HTML5<\/a> im Jahr 2015 ver\u00f6ffentlicht. Mit der Einf\u00fchrung von HTML5 wurden mehr Medienspeicher und spezielle Inhaltselemente unterst\u00fctzt. Inline-Doctype, Audio- und Videoeinbettung wurden ebenfalls viel einfacher gemacht.<\/p>\n

Im Jahr 2022 arbeitet die Welt mit HTML5.2, das die Sicherheitsrichtlinien f\u00fcr Inhalte zu einem Zeitpunkt verbessert, an dem wir sie am meisten brauchen.<\/p>\n

Au\u00dferdem wurde ein starker Fokus auf den E-Commerce gelegt, indem eine API f\u00fcr Zahlungsanfragen hinzugef\u00fcgt wurde. Mit diesem Upgrade wurden auch barrierefreie Internetanwendungen f\u00fcr Menschen mit Behinderungen eingef\u00fchrt.<\/p>\n

Wof\u00fcr wird HTML verwendet?<\/h2>\n

Die einfache Antwort auf diese Frage ist, dass HTML \u00fcberall auf der Welt zur Erstellung von Webseiten f\u00fcr den privaten und gesch\u00e4ftlichen Gebrauch verwendet wird.<\/p>\n

Die eigentliche Antwort ist aber viel detaillierter als das.<\/p>\n

HTML ist seit den 1990er Jahren die Standardsprache f\u00fcr webbasierte Dokumente und Webseiten. Sie hilft den Browsern<\/a>, die Struktur einer Webseite und den damit verbundenen Stil zu verstehen.<\/p>\n

Im Grunde ist HTML ein Plan, der dem Webbrowser sagt, wie er deine Webseite f\u00fcr den Besucher zusammenstellen soll. Wenn ein Nutzer deine URL eingibt, setzt der Browser die Seite anhand der im HTML-Code festgelegten Bausteine zusammen.<\/p>\n

\"HTML5
Eine Grafik, die zeigt, was HTML5 alles kann (Quelle:<\/b> SCF<\/a>)<\/figcaption><\/figure>\n

In Kombination mit einem CSS-Stylesheet<\/a>, das die Elemente in deinem HTML-Dokument formatiert, sieht die Seite dann so aus, wie sie vom Benutzer betrachtet werden soll.<\/p>\n

Die aktuelle Version von HTML erm\u00f6glicht es auch, Videos, Audiodateien, Tabellenkalkulationen und andere Anwendungen direkt auf Webseiten auszuf\u00fchren. Wenn du diese Elemente schon einmal auf einer Webseite bestaunt hast, verdankst du das HTML5.<\/p>\n

Diese Auszeichnungssprache sorgt auch f\u00fcr eine reibungslose interne Navigation auf einer Webseite dank Hyperlinks.<\/p>\n

Website-Designer\/innen k\u00f6nnen mit HTML auch Formulare zur Lead-Generierung<\/a> erstellen, um E-Mails und Namen zu sammeln (vorausgesetzt, du nutzt eine Datei, die in einer anderen Sprache codiert ist).<\/p>\n

Wenn du externe Plugins verwendest, kannst du HTML auch nutzen, um Reservierungssysteme oder Suchformulare innerhalb einer Webseite zu erstellen, die eine einfachere Buchung und Navigation erm\u00f6glichen.<\/p>\n

Mit HTML f\u00fcgst du nicht-dynamische Inhalte auf einer Webseite ein – Inhalte, die jeder Besucher auf die gleiche Weise sehen soll. Wenn du dynamische Inhalte m\u00f6chtest, musst du JavaScript<\/a>, PHP<\/a> oder andere Programmiersprachen einsetzen.<\/p>\n

Wie funktioniert HTML?<\/h2>\n

Im Mai 2022 gibt es mehr als 3,56 Milliarden<\/a> Seiten im Internet. Viele dieser Seiten sind einfache HTML-Dateien. (Wohlgemerkt, wir reden hier nicht von Webseiten, sondern von einzelnen Seiten im Internet.)<\/p>\n

Wenn deine Webseite fr\u00fcher 150 Seiten hatte, hattest du wahrscheinlich auch 150 einzelne HTML-Dateien. Aber heute haben sich die Dinge ge\u00e4ndert. Wenn du ein Content Management System (CMS)<\/a> verwendest, und das tun die meisten, ist das nicht der Fall, da es die Seiten in der Regel dynamisch aus den in einer Datenbank gespeicherten Daten erstellt.<\/p>\n

\"Internetseiten-Grafik\"
Eine Grafik, die zeigt, wie viele Seiten es im Internet gibt<\/figcaption><\/figure>\n

Diese Dateien werden auch HTML-Dokumente genannt und sie sind die Bausteine deiner Webseite. Jede Seite hat verschiedene On-Page- und Off-Page-Elemente, die alle ihren Platz in HTML-Dokumenten haben. Dazu geh\u00f6ren Backend-Elemente<\/a> wie Meta-Tags, Title-Tags und Alt-Tags, aber auch physische Elemente wie Videos, Bilder, Textbl\u00f6cke und andere benutzerorientierte Funktionen.<\/p>\n

Was macht ein HTML-Dokument aus?<\/h3>\n

Alle HTML-Dokumente enden mit der Endung .html oder .htm. Diese Dokumente enthalten den gesamten Text und die Tags, die statische Informationen f\u00fcr einen Webbrowser bereitstellen.<\/p>\n

Das HTML-Dokument ist die Gebrauchsanweisung, die der Webbrowser des Nutzers zum Aufbau der Webseite verwendet. Alle Dateien, auf die es verweist (CSS-Stylesheets, JavaScript-Dateien zur Steuerung dynamischer Elemente usw.), werden vom Browser gelesen, der die Seite dann entsprechend rendert, damit der Betrachter sie so sehen kann, wie sie gedacht ist. Das Rendern ist der eigentliche Aufbau und findet jedes Mal statt, wenn jemand zu einer bestimmten Seite auf deiner Webseite navigiert.<\/p>\n

Wenn es Probleme mit deinem HTML-Dokument oder einer der darin enthaltenen Dateien gibt, wird die Seite nicht richtig dargestellt. Das w\u00e4re so, als w\u00fcrdest du versuchen, einen IKEA-Schreibtisch ohne ein wichtiges Teil oder Werkzeug zusammenzubauen.<\/p>\n

Moderne Webseiten enthalten verschiedene HTML-Elemente, die aus Tags und Attributen bestehen. Diese Elemente bilden die Struktur einer Seite. Die Tags, die mit jedem Element verbunden sind, zeigen, wo es beginnt und wo es endet. Ohne ein Tag, das ein Element abschlie\u00dft, platziert der Browser alle folgenden Inhalte in dieser Spalte oder Zeile, auch wenn das nicht deine Absicht ist.<\/p>\n

Die Attribute, die mit jedem Element auf einer Seite verbunden sind, zeigen die verschiedenen Eigenschaften, aus denen sie bestehen.<\/p>\n

Alle HTML-Dokumente beginnen mit einer <!DOCTYPE>-Deklaration. Diese Dokumenttyp-Definition, auch DTD genannt, legt die Struktur und die Elemente eines XML-Dokuments<\/a> fest.<\/p>\n

W\u00e4hrend <div> fr\u00fcher die erste Wahl f\u00fcr die Erstellung von Inhaltsbl\u00f6cken war, gibt es in HTML5<\/a> auch spezielle Bl\u00f6cke wie <main>, die den Crawlern die Art des Inhalts anzeigen, der in einem Block enthalten ist – in diesem Fall der Hauptinhalt des Blogs\/Artikels.<\/p>\n

HTML-Grundlagen<\/h2>\n

Wenn du Webdesigner\/in werden oder zumindest an der Gestaltung der Webseite deines Unternehmens mitwirken willst, musst du HTML lernen<\/a>. Wie bei so ziemlich allem, was es in dieser Welt zu lernen gibt, musst du mit den Grundlagen beginnen, um ein gutes Verst\u00e4ndnis f\u00fcr die fortgeschrittenen Elemente zu haben.<\/p>\n

Du kannst nat\u00fcrlich auch einen kostenlosen HTML-Editor<\/a> oder Sublime Text<\/a> verwenden, aber wenn du wei\u00dft, wie HTML funktioniert, kannst du die von dir erstellten Webseiten besser personalisieren.<\/p>\n

In den folgenden Abschnitten werden wir einige HTML-Grundlagen erl\u00e4utern, damit du die ersten Schritte zum HTML-Know-how machst.<\/p>\n

Elemente von HTML<\/h3>\n

Alle HTML-Elemente, unabh\u00e4ngig davon, was sie erstellen, haben die gleichen drei Komponenten. Du hast ein \u00f6ffnendes Tag, den eigentlichen Inhalt und ein schlie\u00dfendes Tag.<\/p>\n

\"HTML-Komponente\"
Die drei Bestandteile eines HTML-Elements<\/figcaption><\/figure>\n

Deine Opening Tags zeigen dem Webbrowser, wo die Elemente deiner Seite beginnen. Sie k\u00f6nnen zum Beispiel zeigen, wo ein Videoplayer oder ein Textabsatz auf der Seite beginnt. Alle \u00f6ffnenden Tags verwenden \u00f6ffnende und schlie\u00dfende spitze Klammern, um sich selbst zu kennzeichnen. Das \u00f6ffnende Tag <em> hebt zum Beispiel Inhalte hervor, wie zum Beispiel kursive Schrift. Du w\u00fcrdest dieses Tag vor dem Text platzieren, den du hervorheben m\u00f6chtest.<\/p>\n

Der Inhalt selbst ist die eigentliche Information, die der Nutzer sieht. Das kann ein geschriebener Text sein, wie ein Blogbeitrag. Es kann auch ein Bild oder ein Einbettungscode f\u00fcr ein Video sein. Wenn er nach dem Er\u00f6ffnungstag platziert wird, beginnt der Inhalt an der angegebenen Stelle.<\/p>\n

Das schlie\u00dfende Tag ist dasselbe wie das \u00f6ffnende Tag, aber es f\u00fcgt einen Schr\u00e4gstrich vor dem Namen des Elements hinzu. Um auf unser Beispiel mit dem Hervorhebungs-Tag zur\u00fcckzukommen, w\u00fcrdest du das Tag <\/em> am Ende des Textes platzieren, den du hervorheben m\u00f6chtest.<\/p>\n

Wenn du also zum Beispiel das Wort „genau“ kursiv setzen willst, w\u00fcrdest du es so programmieren:<\/p>\n

<em>Genau.<\/em><\/p>\n

Auf der eigentlichen Benutzerseite w\u00fcrde es dann so aussehen:<\/p>\n

Genau.<\/em><\/p>\n

HTML-Elemente enthalten auch Attribute, die einen Namen und einen Attributwert enthalten. Der Name des Attributs zeigt an, was der Benutzer hinzuf\u00fcgt, w\u00e4hrend der Wert zus\u00e4tzliche Informationen liefert.<\/p>\n

Bei Bild-Tags musst du nat\u00fcrlich angeben, welches Bild du zeigen willst. Das sieht dann so aus:<\/p>\n

<img src=“img_girl.jpg“><\/strong><\/p>\n

Wenn du einen Absatz auf deiner Seite rot f\u00e4rben m\u00f6chtest und dabei die Schriftart Arial verwendest, kannst du das Attribut style verwenden:<\/p>\n

<p style=“color:red;font-family:arial“>
\n<\/strong>
\nIn diesem Beispiel verwenden wir das \u00f6ffnende Tag <p> f\u00fcr einen neuen Absatz. Mit diesen Attributen w\u00fcrde alles in diesem Absatz in der Schriftart Arial rot sein, bis zum schlie\u00dfenden Tag <\/p>.<\/p>\n

In der modernen Webentwicklung ist es jedoch \u00fcblich, das HTML-Style-Attribut nicht zu verwenden, um das Design einzelner Elemente anzupassen, sondern die gesamte Seite mit einem separaten CSS-Stylesheet zu gestalten.<\/p>\n

HTML class und ID sind zwei Attribute eines HTML-Elements, die es „benennen“ und dir helfen, diese Elemente sp\u00e4ter mit CSS oder JavaScript gezielt zu gestalten. Das hilft bei der Entwicklung<\/a> und macht sie effektiver. Durch die Verwendung der ID oder Klasse eines Elements kannst du Stilinformationen in Elemente wie Hintergrundfarbe, Rahmen, Schriftfarbe<\/a> und mehr einf\u00fcgen.<\/p>\n

Anstatt den Text im HTML-Dokument rot zu f\u00e4rben, k\u00f6nntest du zum Beispiel so vorgehen:<\/p>\n

<p class=\u201dredtext\u201d>\n\nAnd in the CSS stylesheet, target the class like this:\n\n.redtext {\n\ncolor:red;\n\nfont-family:arial;\n\n}>\/code><\/code><\/pre>\n
Die am h\u00e4ufigsten verwendeten HTML-Tags und HTML-Elemente<\/h3>\n
Es gibt 142 verschiedene HTML-Tags, mit denen du Elemente erstellen kannst. Diese bestehen sowohl aus Block-Level- als auch aus Inline-Elementen.<\/p>\n
Block-Level-Elemente erstrecken sich \u00fcber die gesamte Breite einer Seite und beginnen eine neue Zeile innerhalb eines Dokuments.<\/p>\n
Hier sind ein paar g\u00e4ngige Block-Level-Tags, die du auf deiner Webseite verwenden kannst:<\/p>\n