HTML – Von Entstehung bis hin zum Nutzen

HTML steht für „Hypertext Markup Language“ und lässt sich im Deutschen als Auszeichnungssprache des Hypertexts verstehen.

Die Funktion dahinter basiert darauf, dass Bilder, Texte, Videos oder sonstige Dateien elektronisch in der Auszeichnungssprache dargestellt werden und so universal und unabhängig von Webbrowser, Anbieter, etc. verstanden werden kann.

Geschichte des HTML

Für das Internet wurde ab dem Jahr 1990 nach einem Weg gesucht, einheitliche Regeln zu konzipieren, besonders hinsichtlich veröffentlichter Informationen. Diese sollten so aufbereitet werden, dass sie für jegliche Software zur Verfügung stehen und gelesen werden können – das war die Hypertext Markup Language, bekannt als HTML.

Schon bevor das Internet öffentlich wurde, hat der Brite Tim Berners-Lee das Grundgerüst des HTML konzipiert. Dabei konzentrierte er sich zunächst auf wissenschaftliche Informationen, die über das Internet ausgetauscht werden sollten. Dennoch war dies der Beginn von HTML, das seither stetig erneuert und optimiert wurde. Heute wird HTML versionslos als „HTML Living Standard“ der WHATWG fortlaufend weiterentwickelt.

Ein HTML-Element besteht in der Regel aus einem öffnenden Tag (z. B. <a>), dem Inhalt und einem schließenden Tag (</a>). Ein „Tag“ ist also nur die Auszeichnung in spitzen Klammern, während das „Element“ öffnendes Tag, Inhalt und schließendes Tag zusammen umfasst. Attribute stehen im öffnenden Tag und ergänzen das Element, z. B. href bei Links sowie src und alt bei Bildern.

Was macht man mit HTML?

HTML ist vor allem dafür da, dass Informationen universal weitergegeben werden können, nicht abhängig vom Anbieter, Programm, Webbrowsers oder Provider, sondern vielmehr von allen Geräten gleichermaßen lesbar. Mit diesem Hypertext lassen sich beispielsweise Webseiten formen, die durch spezielle Codes Kapitel, Überschriften, Farben, Hintergründe, Grafiken und vieles mehr darstellen können.

Der Fokus liegt darauf, eine einheitliche Struktur zu entwickeln, die dann weltweit genutzt wird. Dabei spielt auch CSS eine wichtige Rolle, dies steht für Cascading Style Sheets, was dabei hilft die Inhalte zu formatieren. Der Hauptzweck von CSS ist die Darstellung, basierend auf dem Bereich und dem Inhalt. HTML und CSS in Kombination können demnach eine Strukturierung und Darstellung von Inhalten, beispielsweise anhand von Internetseiten ausweisen.

Mit HTML5 kamen semantische Struktur-Elemente, die den Aufbau einer Seite inhaltlich beschreiben – etwa <header>, <nav>, <main>, <article>, <section> und <footer>. Sie verbessern Maschinenlesbarkeit, Barrierefreiheit (Screenreader) und SEO. Reine Gestaltungselemente wie <center> oder <font> gelten dagegen als veraltet (deprecated) und sollten durch CSS ersetzt werden – Aussehen gehört ins Stylesheet, nicht ins HTML.

HTML und SEO?

Auch für die Suchmaschinenoptimierung (SEO) ist HTML wichtig. Es gibt mehrere Faktoren, mit denen sich die Sichtbarkeit über Suchmaschinen durch HTML verbessern lässt.

Der Title-Tag ist ein gutes Beispiel, denn damit wird der Titel des Artikels bestimmt. Durch eine Keyword-Recherche werden zuerst die wichtigsten Keywords gesucht; das Hauptkeyword sollte zu Anfang des Titles stehen. So kann Google direkt feststellen, worum es geht. Eine schlechte Kennzeichnung oder ein Keyword, das nicht im Title vorkommt, kann dazu führen, dass der Artikel im Ranking nicht beachtet wird.

Ein weiterer wichtiger Aspekt ist die Meta Description. Sie ist kein automatischer Auszug der ersten Zeichen des Artikels, sondern ein eigenständiges <meta name=“description“>-Element, dessen Text (rund 155 Zeichen) frei definiert wird und als Vorschau-Snippet in den Suchergebnissen erscheinen kann. Viele Systeme wie WordPress bieten ein Feld dafür; manuell sieht der Tag so aus:

<meta name="description" content="Kurze Seitenbeschreibung">

Moderne Webseiten beruhen auf drei Bausteinen mit klarer Aufgabenteilung: HTML liefert die Struktur und den Inhalt (Überschriften, Texte, Bilder), CSS übernimmt die Gestaltung (Farben, Layout, Schrift) und JavaScript sorgt für Verhalten und Interaktivität (z. B. Formularprüfung, dynamische Inhalte). Dieses Dreieck „Struktur – Gestaltung – Verhalten“ ist das gängige Einstiegsmodell.

Es gibt viele weitere HTML-Auszeichnungen, die SEO unterstützen, etwa die Heading-Tags – SEO und HTML gehen Hand in Hand. Wer optimales SEO-Marketing betreiben möchte, sollte Grundwissen in HTML mitbringen. Mehr dazu in unserem Ratgeber zur Suchmaschinenoptimierung.

HTML Code

Jede HTML-Datei beginnt mit einem Grundgerüst, das in jeder Datei gleich aufgebaut ist und auf jeder Seite individuell befüllt wird.

Das Grundgerüst (<!DOCTYPE html>, <html>, <head>, <body>) ist ein Ausgangsschema, das auf jeder Seite individuell angepasst wird – der <head> mit title/meta, der <body> mit dem sichtbaren Inhalt. Es enthält auch Elemente, die im fertigen Dokument unsichtbar bleiben, etwa Angaben im <head>-Bereich (nicht zu verwechseln mit dem sichtbaren <header>-Element).

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Seitentitel</title>
    <meta name="description" content="Kurze Seitenbeschreibung">
  </head>
  <body>
    <!-- Sichtbarer Inhalt der Seite -->
  </body>
</html>

HTML erstellen: Wie geht das? Welches Programm?

Es gibt verschiedene Programme, mit denen man HTML-Dateien erstellen kann, zum Beispiel:

• Windows Editor
• Microsoft Editor
• HTML-Editor
• Nvu
• BlueGriffon (auch für Mac)
• Adobe Brackets (auch für Mac)
• Visual Studio Express

Der genaue Ablauf der Erstellung einer HTML Datei basiert auf dem Programm, doch das Grundprinzip bleibt das gleiche. In nur drei Schritten kann beispielsweise eine HTML Datei bei Windows Editor erstellt werden.

Schritt 1:

Windows Editor aufrufen, welche immer Bereich „Windows-Zubehör“ gefunden werden kann.

Schritt 2:

Das HTML Grundgerüst in die Datei kopieren. Das Grundgerüst kann diesem Artikel entnommen werden.

Schritt 3:

Diese HTML Datei muss nun durch „Speichern unter“ gespeichert werden, zugleich öffnet sich ein neues Fenster. Nun kann unter dem Feld Dateityp .txt ausgewählt werden und dann muss die Endung von .txt in .html geändert werden. „Speichern“ und schon wurde die HTML Datei erstellt.

Quellen

• Polaris Systems, Entstehung und Zweck von HTML: https://www.polaris-systems.de/tutorials-beitrag/entstehung-und-zweck-von-html.html
• Code Crowd, 10 wichtige HTML Tag: https://code-crowd.de/blog/die-10-wichtigsten-html-tags/
• Wiki.selfhtml, HTML Tutorial: https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst