Was ist HTML? Wer schon mal mit dem Gedanken gespielt hat, eine eigene Webseite zu erstellen, wird früher oder später mit dem Kürzel HTML in Berührung gekommen sein. Aber was heißt das eigentlich? Im folgenden Ratgeber klären wir euch auf. Ihr erfahrt, was HTML genau ist, wie es funktioniert und was HTML mit CSS zu tun hat. Anschließend zeigen wir euch in einer Übersicht die wichtigsten HMTL-Befehle.

Was ist HTML? Kurz erklärt

HTML ist eine Abkürzung und steht für Hyper Text Markup Language, zu deutsch: Auszeichnungssprache für Hypertexte (miteinander verlinkte Dokumente). Etwas weniger technisch formuliert: HTML ist eine Sprache mit deren Hilfe Webseiten strukturiert werden. Jeder Text, den ihr im Browser seht (z.B. dieser Artikel) weist eine bestimmte Struktur auf: Überschriften, Textblöcke, Hyperlinks und Bilder: HTML ist dafür verantwortlich, dass der Browser diese Informationen verarbeiten und auf eurem Bildschirm darstellen kann. Mit HTML  könnt ihr euch also das Grundgerüst einer Webseite zusammenbauen.

Webdesign

Was ist HTML - Und wie funktioniert es?

  • HTML ist komplett textbasiert und benötigt keine Spezialprogramme oder Compiler. Es gibt zwar dezidierte HTML-Editoren - im Prinzip reicht aber ein einfacher Texteditor, z.B. das Windows Notepad, um HTML zu schreiben und einfache Webseiten zu erstellen.
  • In der Praxis verwenden die meisten Leute  heute kein HMTL mehr um mehr ganze Webseiten zu schreiben. Äußerst beliebt sind sogenannte Content-Managment-Systeme (CMS), z.B. Wordpress. Diese Systeme basieren auf HTML und unterstützen User bei der Texterstellung.
  • Kenntnisse in HTML sind trotzdem nützlich, wenn man Texte individuell gestalten will und Funktionen nutzen möchte, die über das jeweilige CMS hinausgehen.
  • HTML besteht aus einzelnen Auszeichnungs-Elementen, sogenannten Tags. Die Tags werden in eckigen Klammern<> gesetzt und definieren, wie die Webseite im Browser dargestelllt wird. Der Artikel, den ihr gerade lest, sieht (leicht vereinfacht) in HTML folgendermaßen aus:

<HTML>

<HEAD>

<TITLE>Was ist HTML?Und was hat das mit CSS zu tun?</TITLE>

</HEAD>

<BODY>

Artikeltext

</BODY>

</HTML>

Wofür stehen die einzelnen Tags?

  • Das <HTML>Tag zeigt dem Browser einfach an, dass es sich bei der Seite um ein HTML-Dokument handelt.
  • Mit dem <Head>Tag kennzeichnet ihr den Kopfbereich der Webseite. Dieser Bereich wird auf der Webseite selbst nicht dargestellt, sondern dient nur dazu, dem Browser Informationen über die Webseite zur Verfügung zu stellen (z.B. die URL oder den Titel).
  • Da das obige Beispiel vereinfacht ist, enthält der Kopfbereich lediglich das <Titel>Tag. Damit wird der Titel der Seite gekennzeichnet. Ihr seht ihn ganz oben am Rand des Browserfensters, also nicht im eigentlichen Text.
  • Mit dem <Body>Tag wird der eigentliche Textbereich der Webseite gekennzeichnet: Alle Informationen hinter dem <Body>Tag erscheinen auch auf der Webseite.
  • Beachtet die hierarchische Struktur der Auszeichnung: Jedes einzelne Element besteht aus einem Start-Tag und einem End-Tag, z.B. <title< und </title> Damit wird dem Browser angezeigt, wo die Markierung als Seitentitel anfängt und endet.
HTML
HTML-Dokumente sehen auf den ersten Blick unübersichtlich aus - im Grunde ist HTML aber relativ leicht zu erlernen.

Was hat HTML mit CSS zu tun?

HTML ist lediglich für die allgemeine Gliederung und Struktur der Webseite zuständig. Etwas vereinfacht formuliert: HTML sagt dem Browser nur, wo etwas steht und nicht, wie es letztlich aussieht. Jeder Browser verfügt über bestimmte Standardvorgaben zur Darstellung von Textelementen: Überschriften werden z.B. immer fett dargestellt, Hyperlinks blau und unterstrichen. Was macht ihr aber, wenn die Überschrift in einer anderen Farbe angezeigt werden soll? Genau hier kommt CSS ins Spiel. Die Abkürzung CSS steht für Cascading Style Sheets und bezeichnet eine Formatierungssprache für HTML. Mit Hilfe von CSS könnt ihr die Texte auf alle möglichen Arten formatieren und z.B. verschiedene Farben, Schriftarten und Layouts für einzelne Textelemente festlegen.

Wichtige HTML-Tags

Die HTML-Tags in dem obigen Beispiel sind nur die absoluten Basis-Elemente einer Webseite. In der Praxis gibt es noch wesentlich mehr Tags, mit denen ihr einen Text gliedern könnt. Einige der Wichtigsten findet ihr in der folgenden Übersicht:

TagFunktion
<h1> … </h1> Hauptüberschrift
<h2> … </h2>Zwischenüberschrift
<p> … </p>Absatz
<br />Zeilenumbruch
<b> … </b>Schrift wird fett angezeigt
<em> … </em>Schrift wird kursiv angezeigt

Das könnte euch auch interessieren:

Bildquellen: HTML, Businessman's Place of Work with Laptop on Wood Table, HTML Code via Shutterstock

GIGA empfiehlt
Weitere interessante Artikel

Du willst keine News rund um Technik, Games und Popkultur mehr verpassen? Keine aktuellen Tests und Guides? Dann folge uns auf Facebook oder Twitter.