Skip to content

6. 📘 Grundlagen HTML

HTML steht für HyperText Markup Language. Es ist die Grund-Sprache des Webs und alle Inhalte werden in HTML dargestellt. Es ist eine sogenannte Auszeichnungssprache. Eine Auszeichnungssprache (englisch: markup language) ist eine maschinell lesbare Sprache zur Strukturierung von Texten und Daten.

6.1 🧩 Grundstruktur

HTML definiert, welche Tags zur Strukturierung zulässig sind -- ähnlich der Grammatik einer Sprache.

6.1.1 Tags

tag
What is HTML – Definition and Meaning of Hypertext Markup Language

Ein HTML-Tag ist wie ein Etikett, das du um einen Inhalt legst, um ihm eine bestimmte Bedeutung zu geben. Die meisten Tags bestehen aus einem öffnenden Tag (z.B. <p>) und einem schließenden Tag (z.B. </p>). Alles dazwischen ist der Inhalt, der vom Tag gekennzeichnet wird. Tags werden ähnlich zu öffnenden und schließenden Klammern in der Mathematik verwendet. Ein Tag wird in eine spitze Klammer eingeschlossen.

Beispiel:

<p>Dies ist ein Absatz.</p>

6.1.2 Attribute

attribute
What is HTML – Definition and Meaning of Hypertext Markup Language

Attribute geben zusätzliche Informationen zu einem Element. Sie stehen im Start-Tag (öffnenden Tag) und bestehen aus name="wert".

Das folgende Beispiel zeigt das Tag html mit dem Attribut lang und dem Wert de. Damit erkennt jeder Browser und jede Suchmaschine, die diese Seite besucht, dass der Inhalt in Deutsch ist.

<html lang="de">

6.1.3 Aufbau

Das folgende Beispiel zeigt ein minimales Beispiel einer HTML-Seite.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist meine erste HTML-Seite.</p>
  </body>
</html>
  • <!DOCTYPE html> Gibt an, dass es sich um ein HTML5-Dokument handelt. Der Doctype gibt genau an, welche Tags zulässig sind.
  • <html lang="de"> Umschließt den gesamten HTML-Inhalt. lang="de" gibt die Sprache des Inhalts an.
  • <head> Enthält „Meta“-Informationen (nicht sichtbare Infos, z. B. Titel, Zeichensatz, Infos für Suchmaschinen).
  • <meta charset="UTF-8"> Gibt den Zeichensatz an – UTF-8 kann Umlaute, Emojis u. v. m. darstellen.
  • <title> Titel der Webseite (erscheint im Browsertab). - <body> Enthält den sichtbaren Inhalt der Seite.

6.1.4 🧹 Groß-/Kleinschreibung, Leerzeichen, Kommentare

  • HTML ist nicht case-sensitive: <P> ist genauso gültig wie <p>.
  • Aber: Kleinbuchstaben sind Standard und sollten verwendet werden (gute Praxis).
  • Du kannst Zeilenumbrüche und Einrückungen verwenden – sie verbessern die Lesbarkeit.
  • Verwende keine Leerzeichen in Tags und zwischen Attribute und Werte, nach < kommt also immer das Tag, z.B. <p> und niemals < p >

6.1.5 💭 Kommentare

Kommentare sind unsichtbar im Browser, aber helfen dir, den Code zu erklären:

<!-- Das ist ein Kommentar -->

6.1.6 🔍 Quelltext anzeigen & Entwicklertools nutzen

Du kannst dir jederzeit den HTML-Code einer Webseite anschauen:

  • Rechtsklick auf eine beliebige Stelle der Webseite
    • Wähle Seitenquelltext anzeigen oder View Page Source
    • Oder wähle Element untersuchen, dies öffnet die Entwicklungswerkzeuge und offenbart noch mehr Infos zur Seite.

Shortcut Entwicklungswerkzeuge

In fast allen Browsern (Chrome, Firefox, Edge) funktioniert die Tastenkombination F12 oder Strg + Umschalt + I.

6.1.7 Wichtige Tags

Jedes Tag gibt seinem Inhalt eine Bedeutung. Verwende die Tags also gemäß ihrer Bedeutung, ihrer Semantik und nicht weil es schöner aussieht. Das Aussehen machen wir mit CSS. Die Bedeutung ist für jede automatische Verarbeitung wichtig, daher strukturiere deine Seiten entsprechend.

Hier sind die grundlegenden Tags, die du kennen solltest:

6.1.7.1 Überschriften: <h1> bis <h6>

Überschriften strukturieren deinen Text. <h1> ist die Hauptüberschrift. <h2> ist eine Unterüberschrift. Überlege dir, wie du einen Text strukturieren würdest mit 1., 1.1, 1.2 etc. -- 1. wäre <h1> und 1.1, 1.2 wären jeweils <h2>.

Beispiel:

<h1>Das ist eine Hauptüberschrift</h1>
<h2>Das ist eine Unterüberschrift</h2>

6.1.7.2 Absätze: <p>

Der <p>-Tag wird für normale Textabsätze verwendet.

Beispiel:

<p>Dies ist ein ganz normaler Textabsatz auf meiner Webseite.</p>
<p>Hier kommt ein weiterer Absatz, um mehr Inhalt darzustellen.</p>

Der <a>-Tag ist extrem wichtig, denn er macht deine Webseite "anklickbar"! Mit ihm kannst du auf andere Seiten im Web (externe Links) oder auf andere Stellen innerhalb deiner eigenen Webseite (interne Links) verweisen.

  • Das Attribut href (hypertext reference) ist entscheidend. Es gibt an, wohin der Link führen soll.
<p>Besuche <a href="https://fbi.h-da.de">Fachbereich Informatik</a> für weitere Informationen.</p>

Dieser Link führt dich zur Seite des Fachbereichs Informatik der Hochschule Darmstadt.

Um interne Links zu nutzen, brauchst du ein Ankerpunkt (oder ID) an der Stelle, zu der du springen möchtest.

<a href="#abschnitt2">Gehe zu Abschnitt 2</a>

<h2 id="abschnitt2">Dies ist Abschnitt 2</h2>

Wenn du auf "Gehe zu Abschnitt 2" klickst, springt der Browser direkt zu der Überschrift mit der ID "abschnitt2".

Ids sind eindeutig

Verwende jede id nur einmal in deiner Seite -- sonst ist unklar, wohin du bei einem Link springen möchtest.

6.1.7.4 Bilder: <img>

Mit dem <img>-Tag kannst du Bilder in deine Webseite einfügen. Dieser Tag ist ein sogenannter leerer Tag, das heißt, er hat keinen schließenden Tag, da er keinen Inhalt umschließt.

  • Das Attribut src (source) gibt den Pfad zum Bild an.
  • Das Attribut alt (alternative text) beschreibt das Bild, falls es nicht geladen werden kann, und ist auch für Screenreader wichtig (für Menschen mit Sehbehinderung).

Beispiel:

<img src="katze.jpg" alt="Eine süße Katze, die auf dem Sofa schläft" />

Achte darauf, dass die Datei katze.jpg im gleichen Ordner liegt wie deine HTML-Datei, oder gib den korrekten Pfad an. Du kannst auch ein Bild im Internet so verlinken -- führe dazu einen Rechtsklick im Browser auf dem Bild ein, das du einfügen möchtest und wähle Grafikadresse kopieren und füge dies als Wert für src ein.

6.1.7.5 Listen: <ul>, <ol> und <li>

Listen helfen dir, Informationen übersichtlich darzustellen. Es gibt zwei Haupttypen:

  • Ungeordnete Liste (<ul> - unordered list): Dies sind Listen mit Aufzählungspunkten (Bullets).
  • Geordnete Liste (<ol> - ordered list): Dies sind nummerierte Listen.
  • Listeneintrag (<li> - list item): Jeder einzelne Punkt in einer Liste wird mit <li> gekennzeichnet.
<ul>
    <li>Äpfel</li>
    <li>Bananen</li>
    <li>Kirschen</li>
</ul>
<ol>
    <li>Schritt 1: Wasser kochen</li>
    <li>Schritt 2: Nudeln hinzufügen</li>
    <li>Schritt 3: Genießen!</li>
</ol>

6.1.7.6 Artikel: <article>

Das <article>-Tag wird verwendet, um einen eigenständigen, unabhängigen Inhalt auf deiner Seite zu kennzeichnen. Das könnte ein Blogbeitrag, ein Zeitungsartikel oder ein Kommentar sein. Ein article könnte auch einfach von einer Seite in eine andere kopiert werden.

<article>
    <h2>Mein erster Blogbeitrag</h2>
    <p>Heute habe ich gelernt, wie man HTML-Tags verwendet. Es macht viel Spaß!</p>
    <p>Ich freue mich schon darauf, meine erste Webseite zu gestalten.</p>
</article>

6.1.7.7 Section

<section> wird verwendet, um thematisch zusammengehörige Inhalte auf einer Webseite zu gruppieren, z. B. Kapitel, Abschnitte oder Bereiche mit ähnlichem Inhalt. article kann in einer section enthalten sein.

Folgendes Chart kann bei der Entscheidung helfen, ein passendes Tag zu wählen

article or p or ...

6.2 📝 Aufgabe

Vervollständige folgenden HTML-Code

<!DOCTYPE html>
<html>
  <head>
    <______>Mein Haustier</______>
  </head>
  <body>
    <____>Das ist mein Hund Balu.</____>
    <____ src="dog.jpg" ____="sitzender Hund" />
    <h2>Was Balu gerne mag:</h2>
    <ul>
      <li>Spazierengehen</li>
      <li>Fressen</li>
      <li>Schlafen</li>
    </ul>
  </body>
</html>

6.2.1 Erste eigene Webseite.

  • Skizziere auf Papier grob, was deine Seite enthalten soll. Kennzeichne mit Pfeilen, welche Tags du hierfür benötigst.
  • Öffne Visual Studio Code und speichere die Datei als index.html.
  • Achte darauf, dass die Datei utf8-codiert gespeichert wird: unten rechts sollte UTF-8 stehen.
  • Tippe die Grundstruktur ab und füge nach und nach Inhalt dazu.
  • Im Windows Explorer (für Mac: Finder): Führe einen Doppelklick auf deine index.html-Datei aus -- dies öffnet einen Browser und zeigt die Datei an. Nach jeder Änderung in VS Code drücke F5 im Browser, um die Seite neu zu laden und dir dein Ergebnis anzusehen.

6.3 🧾 HTML-Formulare

Ein Formular dient dazu, dass Nutzer:innen Daten eingeben – z. B. Name, E-Mail, Nachrichten – und per Knopfdruck senden können. Im Folgenden findest du ein einfaches Beispiel eines Formulars.

<form action="mailto:example@email.com" method="post" >
  <label for="firstName">First name:</label>
  <input type="text" id="firstName" name="firstName">
  <label for="email">Email address:</label>
  <input type="email" id="email" name="email">
  <label for="message">Your message:</label>
  <input type="text" id="message" name="message">
  <button type="submit">Send</button>
</form>
  • <form>: Start des Formulars -- in einer Seite kannst du mehrere Formulare haben.
  • action="mailto:...": Empfängeradresse (z. B. deine), du kannst das Formular auch an einen Server schicken.
  • method="post": get wird für lesende Zugriffe, post für schreibende Zugriffe verwendet.
  • <label> – ist insbesondere für Screenreader wichtig und beschreibt, was hier eingegeben werden soll.
  • <input type="text"> – Einfaches Eingabefeld für Text.
  • <input type="email"> – Eingabe für eine E-Mail-Adresse.
  • <button type="submit"> – Absende-Button.

Kontaktformular

Erstelle dein eigenes Kontaktformular.

6.3.1 Validierung

Validierung bedeutet: Der Browser prüft, ob Felder korrekt ausgefüllt wurden, bevor das Formular abgesendet wird.

Das einfachste Mittel ist das required-Attribut. Es macht ein Eingabefeld verpflichtend – das Formular kann nicht abgesendet werden, solange das Feld leer ist.

Beispiel: 

<input type="email" id="email" name="email" required>

Eine kompliziertere Validierung kannst du mit regulären Ausdrücken definieren.

Ein regulärer Ausdruck (engl. regular expression, kurz: regex) ist ein Muster, das vorgibt, wie eine Eingabe aussehen muss.

Das folgende Beispiel lässt nur Buchstaben zu (durch [A-Za-z]) und erfordert mindestens einen Buchstaben durch +.

<input type="text" id="firstName" name="firstName" pattern="[A-Za-z]+" required>

<input type="text" id="zipCode" name="zipCode" pattern="[0-9]{5}" required>
  • [0-9]{5} bedeutet: genau fünf Ziffern.

💬 Du kannst die Fehlermeldung benutzerfreundlicher machen mit title="...", z. B.:

<input pattern="[0-9]{5}" title="Bitte gib eine fünfstellige Zahl ein">

Clientseitige Validierung

Alles, was du auf dem Client machst dient der Usability und nicht der Sicherheit.

6.3.1.1 📝 Zusatzaufgabe für Fortgeschrittene: Eingabe mit Muster prüfen

Erweitere dein Kontaktformular und verwende required und pattern sinnvoll. Teste das Formular im Browser mit verschiedenen Eingaben.

6.4 HTML und KI

Wenn du die Grundlagen verstanden hast, kannst du auch eine KI nutzen, um HTML-Code schneller zu erzeugen.

6.5 Material