HTML zählt im Webdesign zu den am häu­figs­ten genutzten Aus­zeich­nungs­spra­chen weltweit. Ihre Stärken liegen in der ein­heit­li­chen, über­sicht­lich struk­tu­rier­ten Syntax, einem kos­ten­lo­sen Open-Source-Ansatz und der steilen Lernkurve. Wer möglichst schnell und ohne viel Aufwand ins Webdesign ein­stei­gen will, findet in HTML die richtige Grundlage, um eine moderne, an­spre­chen­de Website mit in­ter­ak­ti­ven Elementen zu pro­gram­mie­ren.

HTML: De­fi­ni­ti­on 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 text­ba­sier­ten Aus­zeich­nungs­spra­chen weltweit. Die Grundlage von HTML legte Tim Berners-Lee, der Erfinder des World Wide Web, im Jahr 1992 mit der ersten HTML-Spe­zi­fi­ka­ti­on. Das World Wide Web Con­sor­ti­um (W3C) erklärte HTML in der 4.0-Version im Dezember 1999 zum of­fi­zi­el­len 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 Er­stel­lung SEO-op­ti­mier­ter Websites zum Einsatz.

HTML lässt sich anhand folgender Ei­gen­schaf­ten sehr klar de­fi­nie­ren:

  • Zur Er­stel­lung von Webseiten kommen HTML-Tags zum Einsatz, die die Elemente der Seite be­schrei­ben und gliedern.
  • Die Syntax von HTML ist ein­heit­lich und text­ba­siert und besteht immer aus einem Anfangs- und einem End-Tag.
  • Aufgrund dessen gilt HTML als eine Markup- oder Aus­zeich­nungs­spra­che.

HTML ist keine Pro­gram­mier­spra­che

HTML zählt im Grunde gar nicht zu den Pro­gram­mier­spra­chen. Im Gegensatz zu Pro­gram­mier- und Skript­spra­chen wie PHP oder Ja­va­Script lassen sich mit HTML aufgrund der fehlenden Be­fehls­struk­tur keine Al­go­rith­men, Aufgaben, Be­din­gun­gen oder Schleifen erstellen. Daher zählt HTML zu den Markup- oder Aus­zeich­nungs­spra­chen. Während HTML eine Webseite mit text­ba­sier­ter, sta­ti­scher Syntax be­schreibt und gliedert, erstellen Pro­gram­mier­spra­chen dy­na­mi­sche Inhalte, komplexe logische Aufgaben, Befehle und Al­go­rith­men.

Tipp

In wenigen Schritten zur eigenen pro­fes­sio­nel­len Website? Mit dem Ex­per­ten­team von IONOS können Sie in ganz nach Wunsch Ihre in­di­vi­du­el­le Homepage erstellen lassen.

Wie kommt HTML zum Einsatz?

HTML dient der Er­stel­lung und Be­ar­bei­tung von privaten oder ge­schäft­li­chen Websites. Das Grund­ge­rüst, auch Quellcode genannt, sieht aufgrund der ein­heit­li­chen Syntax bei HTML-basierten Webseiten stets ähnlich aus. Ein HTML-Quellcode zeigt Browsern, wie sie – in Ver­bin­dung mit CSS (Cascading Style Sheets) – die be­tref­fen­de Webseite inklusive Layout, Ty­po­gra­fie und Farben auf dem Endgerät optisch anzeigen und zu­sam­men­stel­len sollen.

Mit der aktuellen Version HTML5 stehen im Vergleich zu älteren HTML-Versionen zudem viele neue Ein­satz­mög­lich­kei­ten und HTML-Attribute zur Verfügung.

Zu den Ein­satz­mög­lich­kei­ten und Funk­tio­nen von HTML zählen:

Tipp

Gestalten Sie jetzt Ihre eigene pro­fes­sio­nel­le Website: Der Homepage-Baukasten von IONOS bietet hierzu hoch­wer­ti­ge Designs sowie eine eigene Domain, SSL und E-Mail-Postfach.

Wie sieht die Struktur von HTML-Code aus?

Die zu­grun­de­lie­gen­de HTML-Struktur sieht aufgrund der Ein­heit­lich­keit der Syntax immer sehr ähnlich aus. HMTL-Dokumente bestehen stets aus den folgenden drei grund­le­gen­den Tag-Elementen:

DOCTYPE

Die so­ge­nann­te Do­ku­ment­typ-De­kla­ra­ti­on steht immer ganz oben und am Anfang eines HTML-Dokuments. Die Kenn­zeich­nung DOCTYPE html erfolgt im Format <!DOCTYPE html>. Sie erklärt dem Browser, um welchen Do­ku­ment­typ sowie um welche Code-Syntax und HTML-Version es sich handelt. Im Fall von HTML5 bei­spiels­wei­se kann hier <html5> stehen. Da es sich beim DOCTYPE-Tag nicht um ein HTML-Element im ei­gent­li­chen Sinne handelt, kann es als einziges vor dem HTML-Bereich des Dokuments stehen.

HTML-Kopf

Der HTML-Kopf über­mit­telt dem Browser wichtige Angaben und Me­ta­in­for­ma­tio­nen zum Do­ku­ment­kör­per. Die Kenn­zeich­nung erfolgt als <head> und kommt un­mit­tel­bar nach dem Tag <html>, das den HTML-Bereich eröffnet. Im HTML-Kopf können u. a. folgende Elemente stehen:

  • Titel des Dokuments
  • De­scrip­ti­on
  • Autor und Copyright
  • Cha­rak­ter­set
  • Angaben zur mobilen Ska­lie­rung
  • Ein­ge­bun­de­ne Stil- und Skript­in­for­ma­tio­nen zu CSS- oder Ja­va­Script-Dateien und anderen ein­ge­bun­de­nen Res­sour­cen
  • Meta-Robots-Angaben (In­de­xie­rungs­an­wei­sun­gen für Such­ma­schi­nen-Crawler)

HTML-Körper

Der HTML-Körper wird mit dem Tag <body> eröffnet und enthält alle In­for­ma­tio­nen zum sicht­ba­ren Layout und zu ein­ge­bun­de­nen dy­na­mi­schen Sei­ten­ele­men­ten. Der Körper be­schreibt mittels HTML-Tags alles, was Sei­ten­be­su­cher und -be­su­che­rin­nen beim Aufrufen der Website im An­zei­gen­be­reich des Browsers sehen sollen.

Grund­struk­tur eines HTML-Dokuments

Um den grund­le­gen­den Aufbau eines HTML-Dokuments zu ver­an­schau­li­chen, sehen Sie im Folgenden das Grund­ge­rü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-Kom­po­nen­ten-Prinzip:

  • Opening-Tag < >: Er­öff­nen­de Tags stehen stets in einer öffnenden und schlie­ßen­den Spitz-Klammer und zeigen dem Browser, wo das Element mit an­zu­zei­gen­den Inhalten beginnt.
  • Tag-Inhalt: Zwischen Opening-Tag und Ending-Tag steht der Inhalt, den der Browser anzeigen oder ausführen soll. Dieser reicht von Textab­sät­zen, über Vi­deo­play­er bis hin zu Bildern und For­mu­la­ren.
  • Ending-Tag </>: Das Ending-Tag steht in zwei Spitz­klam­mer 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 wich­tigs­ten 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 auf­zu­füh­ren, sehen Sie im Folgenden die wich­tigs­ten 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-Über­schrif­ten an (Gleiches gilt für H2 und H3-Tags)
<a href="https://www.ionos.at/digitalguide/Link-URL">Ver­link­ter Begriff</a> Kenn­zeich­net Links im HTML-Dokument
<p>…</p> Kenn­zeich­net Absätze im Dokument
<ul>…</ul> Kenn­zeich­net Listen
<li>…</li> Tritt in Kom­bi­na­ti­on mit Listen auf und kenn­zeich­net Lis­ten­punk­te
<i>…</i> Kenn­zeich­net Kur­siv­schrift

Welche Rolle spielt HTML für SEO?

Von einem sauberen, korrekten HTML-Code hängt ab, ob Browser, Such­ma­schi­nen und Such­ma­schi­nen-Crawler Ihre Seite richtig anzeigen und in­de­xie­ren. Eine sorg­fäl­tig gepflegte Grund­struk­tur von HTML-Do­ku­men­ten inklusive ein­ge­bun­de­nen Elementen in CSS, Ja­va­Script oder anderen Sprachen wirkt sich daher positiv auf das eigene Ranking aus. Schon ein ver­ges­se­nes Ending-Tag kann hingegen dazu führen, dass Seiten nicht korrekt angezeigt werden. Zudem bestimmen Meta-Tags, wie Snippets in Such­ma­schi­nen aussehen und ob Such­ma­schi­nen eine Seite korrekt in­de­xie­ren.

Zu wichtigen HTML-Tags, mit denen Sie Ihr SEO be­ein­flus­sen können, zählen:

  • Title-Tag: Das Tag <title>…</title> im HTML-Header dient als Über­schrift für Such­ma­schi­nen-Snippets und spielt eine wichtige Rolle fürs Ranking.
  • Meta De­scrip­ti­on: Die Meta De­scrip­ti­on fasst den Inhalt der Webseite kurz und prägnant zusammen. Sie erscheint ebenfalls im HTML-Header und in den Such­ergeb­nis­sen, ist also un­mit­tel­bar SEO-relevant.
  • Robots-Meta-Tags: Die Robots-Tags geben einer Such­ma­schi­ne An­wei­sun­gen für die Vor­ge­hens­wei­se von Crawlern oder für die Seiten-In­de­xie­rung. Dadurch können Sie be­ein­flus­sen, welche Seite indexiert werden soll und welche nicht.
  • Alt-Tag: Mit den Alt-Tags <alt>…</alt> be­schrei­ben Sie Inhalte ein­ge­bun­de­ner Bilder und sorgen für Bar­rie­re­frei­heit sowie eine bessere Plat­zie­rung in der Bil­der­su­che.
  • Anchor-Tag: Mit einem Anchor-Tag … lassen sich Hy­per­links im HTML-Dokument in­te­grie­ren, die auf interne oder externe Inhalte verlinken. Sie ver­bes­sern die Ladezeit und die Be­dien­freund­lich­keit einer Seite, was ebenfalls das Ranking ver­bes­sert.

Welche HTML-Programme gibt es?

Da HTML kostenlos ist, lässt sich damit sehr einfach und un­kom­pli­ziert eine eigene Website gestalten. Hierzu erfordert es jedoch HTML-Editoren, die in der Lage sind, HTML-Dokumente zu erstellen, zu speichern und zu ver­öf­fent­li­chen. Editoren gibt es sowohl kostenlos als auch kos­ten­pflich­tig als in­stal­lier­ba­re Desktop-Software oder als direkte Online-Editoren.

Zu den besten HTML-Editoren zählen:

  • Notepad++ (kostenlos)
  • NoteTab (kos­ten­lo­se und kos­ten­pflich­ti­ge Version)
  • CoffeeCup (kos­ten­lo­se und kos­ten­pflich­ti­ge Version)
  • Visual Studio Code (kostenlos)
  • Atom (kostenlos)
  • Sublime Text 3 (kos­ten­lo­se und kos­ten­pflich­ti­ge Version)
  • Android Studio (kostenlos)
  • Brackets (kostenlos)
  • CotEditor (kostenlos)
  • Bluefish (kostenlos)
  • Komodo Edit (kostenlos)

HTML lernen leicht gemacht

HTML zählt nicht nur zu den meist­ge­nutz­ten Aus­zeich­nungs­spra­chen im Webdesign, sondern auch zu den leicht­ver­ständ­lichs­ten. Zudem gilt HTML für Ent­wick­le­rin­nen und Ent­wick­ler sowie für Pro­gram­mie­re­rin­nen und Pro­gram­mie­rer als Stan­dard­wis­sen in der Web­ent­wick­lung. Wenn Sie HTML lernen möchten, pro­fi­tie­ren Sie von einer sauberen, über­sicht­li­chen Syntax und einer optimalen Grundlage für viel­fäl­ti­ge Web­pro­jek­te. Besonders einfach und schnell geht die Website-Ge­stal­tung für Ein­stei­ge­rin­nen und Ein­stei­ger mit Editoren nach dem Prinzip WYSIWYG („What You See Is What You Get“), die keine ver­tief­ten HTML-Kennt­nis­se vor­aus­set­zen. Die Eingabe von HTML-Code übernimmt der Editor durch in­te­grier­te Struk­tu­rie­rungs-, Eingabe- und Drag-and-Drop-Funk­tio­nen.

Zum Hauptmenü