HTML Grundlagen

Was ist HTML?

HTML steht für Hypertext Markup Language und ist der grundlegende Baustein, aus dem Webseiten erstellt werden.

HTML ermöglicht es uns, eine Webseite durch Abschnitte, Absätze und Überschriften zu strukturieren. Es erlaubt uns, Text, Links, Karten, Listen, Buttons und vieles mehr zu erstellen.

1. HTML-Tags

Die Struktur einer HTML-Datei ist sehr einfach. Fast alle Elemente sind lediglich Inhalte, die von öffnenden und schließenden HTML-Tags umschlossen werden. Zum Beispiel würdest du den Titel einer Webseite so schreiben:

<title>Document</title>

Obwohl die aktuelle HTML-Version (HTML5) 140 verschiedene Tags enthält, werden die meisten Websites mit nur einem Bruchteil davon erstellt. Du hast bereits das Title-Tag gesehen, werfen wir einen kurzen Blick auf andere häufig verwendete Tags. Du wirst diese wahrscheinlich auch in deinem Projekt verwenden:

<html> - Muss den gesamten übrigen Code umschließen
<head> - Enthält den Titel, die Verknüpfung zur CSS-Datei (Styling) und verschiedene andere Informationen
<body> - Enthält den sichtbaren Inhalt einer Website
<p> - Absatz, einfacher Text wird hier eingefügt
<h1> - Überschrift der obersten Ebene einer Website
<h2> - Überschrift der zweiten Ebene
<div> - Struktur, die Inhalte gruppiert
<ul> - Ungeordnete Liste, enthält Listenelemente <li>
<li> - Listenelement, wird innerhalb von Listen verwendet
<a> - Link-Tag, wird verwendet, um von einer Website zu einer anderen zu verlinken
<img> - Ein Bild in einer HTML-Seite
<form> - Zum Erstellen eines HTML-Formulars für Benutzereingaben
<button> - Erstellt einen klickbaren Button
<header> - Repräsentiert den Kopfbereich einer Seite
<nav> - Wird für Navigationslinks verwendet
<main> - Enthält den Hauptinhalt des Dokuments
<section> - Definiert einen Abschnitt in einem Dokument
<footer> - Repräsentiert den Fußbereich einer Seite
<meta> - Stellt Metadaten über das HTML-Dokument bereit
<link> - Wird verwendet, um externe Ressourcen wie Stylesheets zu verknüpfen
<strong> - Kennzeichnet Text mit starker Bedeutung (fett)
<em> - Betont Text (kursiv)
<pre> - Behält sowohl Leerzeichen als auch Zeilenumbrüche bei
<code> - Definiert ein Stück Computercode
<!DOCTYPE> - Deklaration, die den Dokumenttyp definiert

2. HTML-Struktur

Jetzt, da du die Mehrheit der relevanten Tags kennst, bleibt nur noch die Frage, wie wir tatsächlich HTML-Code schreiben. Dafür ist es wichtig zu wissen, dass alle HTML-Dokumente die gleiche grundlegende Struktur aufweisen müssen, bevor etwas Nützliches getan werden kann. Diese Grundstruktur sieht in etwa so aus und ist oft über eine Tastenkombination zugänglich (damit du nicht jedes Mal alles neu tippen musst, wenn du eine neue Datei erstellst):


<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Dokument</title>
  </head>
  <body>
  </body>
</html>

Alle Inhalte, die auf einer Webseite erscheinen, werden zwischen den <body>-Tags geschrieben. Nun kennen wir die grundlegende Struktur und einige HTML-Tags, aber wie und wo schreiben wir HTML-Code? Die Antwort ist einfach: Wir können HTML-Code überall schreiben! Selbst in einem einfachen Texteditor, solange wir den Code als .html speichern, können wir die Ergebnisse in einem Webbrowser betrachten.

Bitte beachte, dass wir die Startseite unserer Websites immer als index.html speichern sollten. Der Grund dafür ist, dass Webserver standardmäßig nach einer index.html-Datei suchen, wenn Benutzer unsere Websites aufrufen - und wenn keine vorhanden ist, kann dies zu erheblichen Problemen führen.