Was ist HTML (Hyper Text Markup Language)?
HTML zählt im Webdesign zu den am häufigsten genutzten Auszeichnungssprachen weltweit. Ihre Stärken liegen in der einheitlichen, übersichtlich strukturierten Syntax, einem kostenlosen Open-Source-Ansatz und der steilen Lernkurve. Wer möglichst schnell und ohne viel Aufwand ins Webdesign einsteigen will, findet in HTML die richtige Grundlage, um eine moderne, ansprechende Website mit interaktiven Elementen zu programmieren.
- HTML: Definition der Hyper Text Markup Language
- HTML ist keine Programmiersprache
- Wie kommt HTML zum Einsatz?
- Wie sieht die Struktur von HTML-Code aus?
- Grundstruktur eines HTML-Dokuments
- Der Aufbau von HTML-Tags
- Die 10 wichtigsten HTML-Tags
- Welche Rolle spielt HTML für SEO?
- Welche HTML-Programme gibt es?
- HTML lernen leicht gemacht
HTML: Definition der Hyper Text Markup Language
HTML steht für „Hyper Text Markup Language“ und zählt mit Java und CSS zu den am meisten genutzten textbasierten Auszeichnungssprachen weltweit. Die Grundlage von HTML legte Tim Berners-Lee, der Erfinder des World Wide Web, im Jahr 1992 mit der ersten HTML-Spezifikation. Das World Wide Web Consortium (W3C) erklärte HTML in der 4.0-Version im Dezember 1999 zum offiziellen Standard. Seither basieren etwa 63 Prozent aller Websites auf HTML-Code. Aktuell (Stand: 2023) kommen vor allem die Versionen XHTML und HTML5 für die Erstellung SEO-optimierter Websites zum Einsatz.
HTML lässt sich anhand folgender Eigenschaften sehr klar definieren:
- Zur Erstellung von Webseiten kommen HTML-Tags zum Einsatz, die die Elemente der Seite beschreiben und gliedern.
- Die Syntax von HTML ist einheitlich und textbasiert und besteht immer aus einem Anfangs- und einem End-Tag.
- Aufgrund dessen gilt HTML als eine Markup- oder Auszeichnungssprache.
HTML ist keine Programmiersprache
HTML zählt im Grunde gar nicht zu den Programmiersprachen. Im Gegensatz zu Programmier- und Skriptsprachen wie PHP oder JavaScript lassen sich mit HTML aufgrund der fehlenden Befehlsstruktur keine Algorithmen, Aufgaben, Bedingungen oder Schleifen erstellen. Daher zählt HTML zu den Markup- oder Auszeichnungssprachen. Während HTML eine Webseite mit textbasierter, statischer Syntax beschreibt und gliedert, erstellen Programmiersprachen dynamische Inhalte, komplexe logische Aufgaben, Befehle und Algorithmen.
In wenigen Schritten zur eigenen professionellen Website? Mit dem Expertenteam von IONOS können Sie in ganz nach Wunsch Ihre individuelle Homepage erstellen lassen.
Wie kommt HTML zum Einsatz?
HTML dient der Erstellung und Bearbeitung von privaten oder geschäftlichen Websites. Das Grundgerüst, auch Quellcode genannt, sieht aufgrund der einheitlichen Syntax bei HTML-basierten Webseiten stets ähnlich aus. Ein HTML-Quellcode zeigt Browsern, wie sie – in Verbindung mit CSS (Cascading Style Sheets) – die betreffende Webseite inklusive Layout, Typografie und Farben auf dem Endgerät optisch anzeigen und zusammenstellen sollen.
Mit der aktuellen Version HTML5 stehen im Vergleich zu älteren HTML-Versionen zudem viele neue Einsatzmöglichkeiten und HTML-Attribute zur Verfügung.
Zu den Einsatzmöglichkeiten und Funktionen von HTML zählen:
Gestalten Sie jetzt Ihre eigene professionelle Website: Der Homepage-Baukasten von IONOS bietet hierzu hochwertige Designs sowie eine eigene Domain, SSL und E-Mail-Postfach.
Wie sieht die Struktur von HTML-Code aus?
Die zugrundeliegende HTML-Struktur sieht aufgrund der Einheitlichkeit der Syntax immer sehr ähnlich aus. HMTL-Dokumente bestehen stets aus den folgenden drei grundlegenden Tag-Elementen:
DOCTYPE
Die sogenannte Dokumenttyp-Deklaration steht immer ganz oben und am Anfang eines HTML-Dokuments. Die Kennzeichnung DOCTYPE html erfolgt im Format <!DOCTYPE html>. Sie erklärt dem Browser, um welchen Dokumenttyp sowie um welche Code-Syntax und HTML-Version es sich handelt. Im Fall von HTML5 beispielsweise kann hier <html5> stehen. Da es sich beim DOCTYPE-Tag nicht um ein HTML-Element im eigentlichen Sinne handelt, kann es als einziges vor dem HTML-Bereich des Dokuments stehen.
HTML-Kopf
Der HTML-Kopf übermittelt dem Browser wichtige Angaben und Metainformationen zum Dokumentkörper. Die Kennzeichnung erfolgt als <head> und kommt unmittelbar nach dem Tag <html>, das den HTML-Bereich eröffnet. Im HTML-Kopf können u. a. folgende Elemente stehen:
- Titel des Dokuments
- Description
- Autor und Copyright
- Charakterset
- Angaben zur mobilen Skalierung
- Eingebundene Stil- und Skriptinformationen zu CSS- oder JavaScript-Dateien und anderen eingebundenen Ressourcen
- Meta-Robots-Angaben (Indexierungsanweisungen für Suchmaschinen-Crawler)
HTML-Körper
Der HTML-Körper wird mit dem Tag <body> eröffnet und enthält alle Informationen zum sichtbaren Layout und zu eingebundenen dynamischen Seitenelementen. Der Körper beschreibt mittels HTML-Tags alles, was Seitenbesucher und -besucherinnen beim Aufrufen der Website im Anzeigenbereich des Browsers sehen sollen.
Grundstruktur eines HTML-Dokuments
Um den grundlegenden Aufbau eines HTML-Dokuments zu veranschaulichen, sehen Sie im Folgenden das Grundgerüst eines HTML-Dokuments:
<!DOCTYPE html>
<hmtl>
<head>
<title>…</title>
<meta …/>
</head>
<body>
</body>
</html>
Der Aufbau von HTML-Tags
Abgesehen vom DOCTYPE-Tag, das kein End-Tag erfordert, folgen alle Elemente im HTML-Dokument demselben Drei-Komponenten-Prinzip:
- Opening-Tag < >: Eröffnende Tags stehen stets in einer öffnenden und schließenden Spitz-Klammer und zeigen dem Browser, wo das Element mit anzuzeigenden Inhalten beginnt.
- Tag-Inhalt: Zwischen Opening-Tag und Ending-Tag steht der Inhalt, den der Browser anzeigen oder ausführen soll. Dieser reicht von Textabsätzen, über Videoplayer bis hin zu Bildern und Formularen.
- Ending-Tag </>: Das Ending-Tag steht in zwei Spitzklammer mit einem Slash. Es zeigt dem Browser an, wo das HTML-Element endet.
Der Aufbau eines HTML-Elements sieht wie folgt aus:
<…>Beispieltext</...> Die 10 wichtigsten HTML-Tags
Für nahezu jeden Webdesign-Wunsch gibt es das passende HTML-Tag. Da die Liste aller HTML-Tags zu lang ist, um Sie hier komplett aufzuführen, sehen Sie im Folgenden die wichtigsten Tags für ein HTML-Dokument:
HTML-Tag | Funktion |
<!DOCTYPE> | Bestimmt den Typ des HTML-Dokuments |
<html> | Zeigt den Beginn des HTML-Bereichs an |
<head> | Eröffnet den HTML-Kopf |
<body> | Eröffnet den HTML-Rumpf |
<h1>…</h1> | Zeigt H1-Überschriften an (Gleiches gilt für H2 und H3-Tags) |
<a href="https://www.ionos.de/digitalguide/Link-URL">Verlinkter Begriff</a> | Kennzeichnet Links im HTML-Dokument |
<p>…</p> | Kennzeichnet Absätze im Dokument |
<ul>…</ul> | Kennzeichnet Listen |
<li>…</li> | Tritt in Kombination mit Listen auf und kennzeichnet Listenpunkte |
<i>…</i> | Kennzeichnet Kursivschrift |
Welche Rolle spielt HTML für SEO?
Von einem sauberen, korrekten HTML-Code hängt ab, ob Browser, Suchmaschinen und Suchmaschinen-Crawler Ihre Seite richtig anzeigen und indexieren. Eine sorgfältig gepflegte Grundstruktur von HTML-Dokumenten inklusive eingebundenen Elementen in CSS, JavaScript oder anderen Sprachen wirkt sich daher positiv auf das eigene Ranking aus. Schon ein vergessenes Ending-Tag kann hingegen dazu führen, dass Seiten nicht korrekt angezeigt werden. Zudem bestimmen Meta-Tags, wie Snippets in Suchmaschinen aussehen und ob Suchmaschinen eine Seite korrekt indexieren.
Zu wichtigen HTML-Tags, mit denen Sie Ihr SEO beeinflussen können, zählen:
- Title-Tag: Das Tag <title>…</title> im HTML-Header dient als Überschrift für Suchmaschinen-Snippets und spielt eine wichtige Rolle fürs Ranking.
- Meta Description: Die Meta Description fasst den Inhalt der Webseite kurz und prägnant zusammen. Sie erscheint ebenfalls im HTML-Header und in den Suchergebnissen, ist also unmittelbar SEO-relevant.
- Robots-Meta-Tags: Die Robots-Tags geben einer Suchmaschine Anweisungen für die Vorgehensweise von Crawlern oder für die Seiten-Indexierung. Dadurch können Sie beeinflussen, welche Seite indexiert werden soll und welche nicht.
- Alt-Tag: Mit den Alt-Tags <alt>…</alt> beschreiben Sie Inhalte eingebundener Bilder und sorgen für Barrierefreiheit sowie eine bessere Platzierung in der Bildersuche.
- Anchor-Tag: Mit einem Anchor-Tag … lassen sich Hyperlinks im HTML-Dokument integrieren, die auf interne oder externe Inhalte verlinken. Sie verbessern die Ladezeit und die Bedienfreundlichkeit einer Seite, was ebenfalls das Ranking verbessert.
Welche HTML-Programme gibt es?
Da HTML kostenlos ist, lässt sich damit sehr einfach und unkompliziert eine eigene Website gestalten. Hierzu erfordert es jedoch HTML-Editoren, die in der Lage sind, HTML-Dokumente zu erstellen, zu speichern und zu veröffentlichen. Editoren gibt es sowohl kostenlos als auch kostenpflichtig als installierbare Desktop-Software oder als direkte Online-Editoren.
Zu den besten HTML-Editoren zählen:
- Notepad++ (kostenlos)
- NoteTab (kostenlose und kostenpflichtige Version)
- CoffeeCup (kostenlose und kostenpflichtige Version)
- Visual Studio Code (kostenlos)
- Atom (kostenlos)
- Sublime Text 3 (kostenlose und kostenpflichtige Version)
- Android Studio (kostenlos)
- Brackets (kostenlos)
- CotEditor (kostenlos)
- Bluefish (kostenlos)
- Komodo Edit (kostenlos)
HTML lernen leicht gemacht
HTML zählt nicht nur zu den meistgenutzten Auszeichnungssprachen im Webdesign, sondern auch zu den leichtverständlichsten. Zudem gilt HTML für Entwicklerinnen und Entwickler sowie für Programmiererinnen und Programmierer als Standardwissen in der Webentwicklung. Wenn Sie HTML lernen möchten, profitieren Sie von einer sauberen, übersichtlichen Syntax und einer optimalen Grundlage für vielfältige Webprojekte. Besonders einfach und schnell geht die Website-Gestaltung für Einsteigerinnen und Einsteiger mit Editoren nach dem Prinzip WYSIWYG („What You See Is What You Get“), die keine vertieften HTML-Kenntnisse voraussetzen. Die Eingabe von HTML-Code übernimmt der Editor durch integrierte Strukturierungs-, Eingabe- und Drag-and-Drop-Funktionen.
Ähnliche Artikel
CSS in HTML einbinden: Eine Anleitung mit Beispielen
HTML und CSS gehören zu den Kernelementen des World Wide Webs und werden oft in Kombination miteinander verwendet. Arbeiten Sie mit einem HTML-Dokument und möchten CSS einbinden, gibt es interne und externe Methoden, mit denen sich die Formatvorgaben für Ihre Textinhalte effektiv umsetzen lassen. Hier finden Sie eine praktische Anleitung mit Beispielen.
HTML-Attribute: Ein Überblick über die wichtigsten Attribute
HTML-Attribute sind ein wichtiges Werkzeug, um eine Website zu optimieren und das Nutzungserlebnis zu verbessern. Sie hinterlegen Informationen für Elemente oder definieren Gestaltungsmerkmale für diese. Hier erfahren Sie, was HTML-Attribute genau sind und wie sie eingesetzt werden, und erhalten einen Überblick über die gängigsten Attribute.
HTML-Tag img: So fügen Sie Bilder auf Ihrer Website ein
Um Bilder und Grafiken in Ihre Website einzubauen, verwenden Sie das HTML-Tag img. Dieses erlaubt es Ihnen, die Bilder einfach zu positionieren. Mit unterschiedlichen Attributen sorgen Sie dann dafür, dass die Grafik optimal in Ihre Seite passt. Wir erklären Ihnen, wie das img-Tag aufgebaut ist und mit welchen Attributen es verwendet werden kann.
Kaspars GrinvaldsShutterstock CSS-Tutorial: Einführung in Cascading Style Sheets
Ohne CSS wären Webseiten nur eine Ansammlung von Textelementen, die durch Überschriften und Absätze grob in Abschnitte unterteilt sind. Erst die Möglichkeit, HTML durch Cascading Style Sheets zu formatieren, macht das World Wide Web zu dem, was es heute ist: ein bunter Mix individuell gestalteter Online-Auftritte, von der ambitionierten Hobby-Homepage bis hin zur preisgekrönten Design-Website.…
