HTML einfach erklärt

Inhaltsverzeichnis

Wofür steht HTML?

Die Abkürzung HTML steht für Hypertext Markup Language, also einer Auszeichnungssprache für Hypertext. Alles was Sie in Ihrem Browser sehen können, liegt als HTML-Text vor, der darüber informiert, welche Struktur eine Website hat, welche Inhalte Sie darstellt und welche Funktionen einzelne Bereiche erfüllen. Um dies zu ermöglichen, werden innerhalb des Hypertextes bestimmte Auszeichnungen eingebracht, wodurch der Text interaktiv wird. Beispielsweise springen User mithilfe von Hyperlinks zu anderen Bereichen des Textes oder öffnen eine andere Website – wo es genau so weitergeht.

Was ist HTML und wozu braucht man es?

Jede Website besteht aus verschiedenen Einzelteilen, wie beispielsweise Menüs, Überschriften, Bildern, Icons und Text. Um mit der Website zu interagieren, kommen noch Buttons, Links und Formulare dazu. Damit dieser Link Sie beispielsweise zur Übersicht unseres Digitalisierungs-Wikis führt, nehmen wir bei der Gestaltung eine entsprechende Formatierung in HTML vor.

Zum Einsatz kommen dabei verschiedene Elemente, die über bestimmte Attribute verfügen, Unterpunkte enthalten und zusätzlich miteinander verschachtelt werden können. Ein Beispiel, auf das wir später genauer eingehen: Um einen Bereich als Überschrift einzustellen, wird ein entsprechendes HTML-Element verwendet. Dieses wird über ein sogenanntes HTML-Tag, zu Deutsch „Etikett“, signalisiert, welches in spitze Klammern eingefasst wird.

Welche Elemente verwendet werden können, entscheidet das World Wide Web Consortium, das HTML5 im Jahr 2014 als neuen Standard festlegte. Zur Bestimmung eines neuen Standards, einigen sich die Entwickler von Webseiten und von Browsern auf verfügbare Elemente und Attribute, sodass fortan auch wirklich alle dieselbe Sprache sprechen. Davon profitieren beide Seiten, da die Formatierung der Inhalte ja ordentlich dargestellt werden soll. Wie funktioniert das?

Wie ist HTML aufgebaut? Das Grundgerüst im Überblick

Das Grundgerüst eines HTML-Dokuments für eine gängige Website ist in drei Bereiche gegliedert: Head, Body und Footer. Im Head finden sich vor allem sogenannte Meta-Daten, wie etwa der Titel des Dokuments. Die dort angegebenen Informationen sind in den meisten Fällen für den User unsichtbar, der sichtbare Inhalt der Webseiten findet sich nämlich im Body.

Dort werden Strukturelemente wie die Navigationsleiste und der sogenannte Main-Bereich eingeführt, die dem Browser die richtige Unterteilung der Inhalte aufzeigt. Hier bekommt beispielsweise diese Erklärung ihre Absätze, Fettungen und alles in allem die gewünschte Formatierung.

Im Footer finden sich dann meist die gängigen Abschluss-Elemente von Websites, wie etwa Kontaktdaten, Social-Media-Kanäle oder auch AGB und Impressum.

HTML ist also eine Art Baukasten-System, das aus verschiedenen Bereichen besteht, die wiederum durch Elemente strukturiert werden. Hierfür werden die bereits erwähnten HTML-Tags mit ihren spitzen Klammern eingesetzt, die wichtige Anweisungen für den Browser enthalten, was er an der entsprechenden Stelle des Codes zu tun hat.

Dabei treten die meisten HTML-Tags in Paaren auf, nämlich in Form eines öffnenden und eines schließenden Elements. Gemeinsam bilden Sie einen Container, der mit Informationen gefüllt wird. Um das Ganze zu verdeutlichen, schauen wir uns zwei Beispiele an.

Beispiel 1:

Zur Darstellung der Hauptüberschrift wird in HTML das <h1>-Tag verwendet. Möchten wir dem Browser mitteilen, dass er „HTML einfach erklärt“ als Überschrift wahrnimmt, müsste der HTML-Code also lauten:

<h1>HTML einfach erklärt</h1>

Die erste Klammer signalisiert den Beginn eines neuen Segments, die zweite Klammer mit Schrägstrich teilt dem Browser mit, dass dieses Element hier abgeschlossen ist und nachfolgender Text nicht mehr als Überschrift zu interpretieren ist.

Beispiel 2:

Damit der Hypertext auch tatsächlich interaktiv ist und Verweise zu anderen Seiten enthält, müssen Links mithilfe passender Formatierungen eingebaut werden. Dies erfolgt über das <a>-Tag, bei dem zusätzlich eine Referenz angegeben wird, wohin der Link führen soll. Die Referenz wird durch „href=“eingeleitet, anschließend wird das gewünschte Ziel genannt, beispielsweise in Form einer URL. Möchten wir Sie beispielsweise zu unserer Erklärung von Glasfaser-Technologie führen, sähe das so aus:

<a href=“https://www.deutsche-glasfaser.de/glasfaser/“>Alles über Glasfaser</a>

Angezeigt würde Ihnen hier nur der Text „Alles über Glasfaser“, der im Container zwischen den Tags steht. Aufgrund der Anweisungen in den Klammern, würden Sie jedoch erkennen, dass es sich dabei um einen Link handelt, könnten diesen anklicken und direkt auf die entsprechende Seite navigieren – alles dank passender Auszeichnungssprache!

Übrigens: Falls Sie einmal einen Blick darauf werfen möchten, wie der gesamte HTML-Text einer Website aussieht, klicken Sie bei Chrome, Firefox oder Edge mit der rechten Maustaste einmal irgendwo auf einen leeren Bereich der Seite und wählen Sie „Seitenquelltext anzeigen“. Schon können Sie alles genau inspizieren.

Was kann man alles mit HTML machen?

Vorab zur Erinnerung: Bei HTML handelt es sich um eine Markup Language, also um eine Auszeichnungssprache – und streng genommen nicht um eine Programmiersprache. Die häufig gestellte Frage: „Was kann man alles mit HTML programmieren?“, ist also etwas irreführend.

Im Gegensatz zu Programmiersprachen, die komplexe logische Abläufe realisieren können, versehen Auszeichnungssprachen Daten mit Bedeutung und dienen damit vorrangig der Organisierung, Formatierung und Darstellung von Informationen.

HTML hält zur Strukturierung von Webseiten eine Vielzahl nützlicher Funktionen parat, von denen wir bereits Überschriften und Verweise in Form von Links kennengelernt haben. Natürlich lassen sich aber weit mehr Dinge mit HTML anstellen, die uns bei unseren alltäglichen Touren durchs World Wide Web regelmäßig begegnen.

Audiovisuelle Medien

Moderne Websites liefern neben Texten oftmals auch audiovisuelle Inhalte. Besonders wichtig und verbreitet:

Bilder
Videos
Audiodateien

Mithilfe der entsprechenden Tags wird in HTML vorgegeben, an welcher Stelle der Website beispielsweise ein Bild eingebunden werden soll und vor allem, wo die gewünschte Datei abgelegt ist. Da es sich bei HTML um eine Text-Datei handelt, die selbst keine Bilder darstellt, wird also lediglich darauf verwiesen, wo der Browser die passende Bild-Datei findet.

Im Tag findet sich dazu das Kürzel „img“ für image (dt. Bild) sowie das Attribut „src“ für source (dt. Quelle) und ein sogenannter Alternativtext, der über das Attribut „alt“ angegeben wird und beschreibt, was auf dem Bild zu sehen ist – Sie merken, es wird komplexer.

Damit das Bild von einem unserer Router angezeigt wird, sieht der entsprechende Quelltext dann beispielsweise so aus:

Auf ähnliche Weise wird bei Videos und Audiodateien verfahren, auch wenn dabei meist etwas mehr Attribute verwendet werden, da häufig Dateien in verschiedenen Formaten hinterlegt werden – das Prinzip bleibt aber das gleiche.

Strukturierte Darstellung

Um Informationen ordentlich zu präsentieren, haben sich schon lange vor der Entwicklung des Internets Listen, Stichpunkte und Tabellen bewährt. Doch gerade online, wo Nutzer oftmals nach präzisen Antworten und übersichtlichen Lösungen suchen, sind diese Elemente bei Entwicklern besonders beliebt. Daher finden sich unter den vielen HTML-Tags auch

Nummerierte Listen
Unnummerierte Stichpunkte
Tabellen beliebiger Formatierung

So können Inhaltsverzeichnisse angelegt, zentrale Punkte hervorgehoben und Informationen so präsentiert werden, dass User diese schnell erfassen. Auch hier folgt die HTML-Formatierung dem bereits bekannten Muster: Beispielsweise das Tag <ul> für den Beginn einer ungeordneten Liste und </ul> um zu signalisieren, dass die Liste dort wieder endet.

Übertragung eigener Informationen

Das Web ist ein interaktiver Ort und ermöglicht es nicht nur Informationen abzurufen, sondern diese auch mitzuteilen. Dabei kommen oftmals Formulare zum Einsatz. Diese werden zum Beispiel benötigt, wenn Sie auf einer Website Ihre Mail-Adresse übermitteln, um sich für einen Newsletter anzumelden oder sich mit Ihrem Usernamen und Passwort in ein Konto einloggen. Wie das Formular im Einzelnen aussieht, unterscheidet sich je nach benötigten Informationen. Uns soll an dieser Stelle genügen, dass HTML die Möglichkeit dazu bietet.

HTML lernen

Sie haben beim Lesen bereits bemerkt, dass Funktionsweise sowie Grundgerüst von HTML recht übersichtlich sind und möchten mehr erfahren? Online finden Sie viele kostenlose Angebote, um sich mit der Struktur und verschiedenen Optionen intensiver zu befassen und diese auch direkt auszuprobieren. Vorerfahrung brauchen Sie hierbei oftmals nicht und können in Testumgebungen gleich die ersten Klammern setzen, um mit HTML-Tags zu experimentieren!