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

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:

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:

1| <!DOCTYPE html>
2| <hmtl>
3| <head>
4| <title>…</title>
5| <meta …/>
6| </head>
7| <body>
8| </body>
9| </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:

1| <…>Beispieltext</...>

Quelle: https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-html/

Post Views: 276