Zum Hauptinhalt springen

HTML - Grundlagen

HTMLTagsElementeAttributeÜberschriftenListen

HTML steht für Hypertext Markup Language und wurde von Tim Berners-Lee in den frühen 1990er Jahren am Forschungszentrum CERN entwickelt. Ursprünglich diente sie dazu, wissenschaftliche Dokumente plattformunabhängig auszutauschen und durch Querverweise (Hyperlinks) miteinander zu vernetzen. Heute bildet HTML das unverzichtbare Fundament des World Wide Web und stellt den globalen Standard dar, mit dem nahezu jede moderne Website strukturiert wird.

Wie HTML funktioniert: Die Tags​

In einer HTML-Datei werden Texte von speziellen Kürzeln in spitzen Klammern umgeben, den sogenannten Tags. Ein Tag gibt einem Textabschnitt eine feste Bedeutung (eine „Rolle").

Meistens treten Tags paarweise auf:

  • <h1> ... </h1>: Kennzeichnet eine Hauptüberschrift (Heading 1).
  • <p> ... </p>: Kennzeichnet einen Textabsatz (Paragraph).

Die Aufgabe von HTML ist es, eine Struktur zu erzeugen. Was ist eine Überschrift? Wo beginnt ein Absatz? Wo liegt ein Link? Wie die Webseite gestaltet ist, also welche Farben, Schriftgrößen oder ähnliches verwendet werden, wird in einer CSS-Datei festgelegt. Diese Trennung zwischen dem Inhalt und dem Aussehen ist typisch für die Informatik.

Ein Browser (z.B. Firefox oder Chrome) liest den HTML-Code von oben nach unten und setzt die Tags in die grafische Darstellung um, die auf dem Bildschirm erscheint.

Zwischenübung

Im Live-Editor kannst du ein Minimalbeispiel einer HTML-Datei sehen. Finde die Tags für ein Überschrift und einen Absatz und ändere den Inhalt. Achtung, beim Neuladen werden alle Änderungen durch den ursprünglichen Inhalt überschrieben.

<html lang="de">
<body>
    <h1>Das ist eine Webseite</h1>
    <p>Die Struktur und der Inhalt steht in einer HTML-Datei. </p>
</body>
</html>

Attribute​

Viele Tags können durch Attribute näher beschrieben werden. Ein Attribut steht immer im öffnenden Tag und folgt dem Muster: name="wert"

Beispiele:

  • <html lang="de"> – das Attribut lang gibt die Sprache der Seite an.
  • <meta charset="UTF-8"> – das Attribut charset legt die Zeichencodierung fest.
  • <img src="bild.jpg"> – das Attribut src gibt an, welche Bilddatei geladen werden soll.

Attribute verändern also nicht den grundsätzlichen Typ eines Tags, sondern liefern zusätzliche Informationen dazu.

Die erste Webseite​

Nach dem aller ersten HTML-Beispiel ist es Zeit, den Aufbau einer HTML-Datei genauer zu erklären. Jede HTML-Datei sollte mit <!DOCTYPE html> beginnen, das ist kein Tag, sondern eine Anweisung an den Browser, die besagt: „Interpretiere diese Datei als modernes HTML5."

Anschließend folgt das <head> ... </head>-Element mit Metadaten, unsichtbare Informationen für den Browser, z. B. die Zeichencodierung <meta charset="UTF-8"> (damit Umlaute korrekt angezeigt werden) oder der Seitentitel <title>. Der eigentliche sichtbare Inhalt steht im <body> ... </body>-Tag.

<!-- Metadaten der Webseite -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Wie funktioniert das Internet?</title>
</head>

<!-- Sichtbarer Inhalt der Webseite -->
<body>
    <h1>Das Internet erklärt</h1>
    <p>Das Internet ist kein einzelner Computer, sondern ein weltweites <strong>Netzwerk aus Millionen von Computern</strong>, die alle miteinander verbunden sind.</p>
</body>
</html>
Wie funktioniert das Internet?
Orientierungsfragen

Bevor du weiterliest: Finde im Code oben die Antworten auf diese Fragen.

  • Wo steht der Text, der im Browser-Tab erscheint?
  • Wo beginnt der sichtbare Inhalt der Seite?
  • Welche Überschriften-Ebene wird verwendet?
  • Kannst du ein Attribut mit seinem name="wert"-Muster identifizieren?

Übersicht der wichtigsten Tags​

Struktur-Tags​

Die Struktur-Tags bilden das Grundgerüst eines HTML-Dokuments. Sie erzeugen keinen sichtbaren Inhalt, enthalten aber wichtige Informationen über die Webseite.

TagBedeutung
<!DOCTYPE html>Deklaration am Dateianfang – teilt dem Browser mit, dass es HTML5 ist
<html>Das Wurzelelement – umschließt das gesamte HTML-Dokument
<head>Enthält Metadaten und Ressourcen (nicht sichtbar)
<title>Seitentitel im Browser-Tab
<meta>Metadaten wie Zeichensatz oder Sprache (selbstschließend)
<body>Sichtbarer Inhalt der Seite

Überschriften, Aufzählung und Texte​

Mit anderen Tags lassen sich hingegen Überschriften, Aufzählung und Texte festlegen. Im obigen Beispiel wurden nicht alle der folgenden Tags verwendet. Probiere die Tags aus, um zu sehen, was sie bewirken.

TagBedeutung
<h1> ... </h1>Überschriften (heading) in absteigender Hierarchie bis <h6>
<p> ... </p>Textabsatz (Paragraph). Gliedert einen Text.
<ul> ... </ul>Ungeordnete Liste
<ol> ... </ol> Geordnete (nummerierte) Liste
<li> ... </li>Listenelement. Nur innerhalb einer Liste.
<strong> ... </strong>Kennzeichnet inhaltlich wichtigen Text. Wird fett dargestellt.
<em> ... </em>Kennzeichnet betonten Text. Wird kursiv dargestellt.
<br>Zeilenumbruch (break)
<hr>Horizontale Trennlinie (horizontal rule)
Training: Verständnisfragen

  1. Schau dir das folgende HTML-Schnipsel an und beantworte die Fragen:

    <body>
      <h1>Rezepte der Welt</h1>
      <p>Hier findest du einfache Rezepte aus verschiedenen Ländern.</p>
      <h2>Zutaten für Pasta</h2>
      <ol>
        <li>200 g Nudeln</li>
        <li>2 Tomaten</li>
        <li>Salz und Pfeffer</li>
      </ol>
      <p>Guten Appetit! <br> Viel Spaß beim Kochen.</p>
    </body>
    1. Welche Tags kommen vor? Benenne jeden Tag und erkläre kurz seine Aufgabe.
    2. Warum wird hier <ol> statt <ul> verwendet? Erkläre beide.
    3. Erläutere, wie <li> korrekt verwendet wird.
    4. Erkläre, warum <br> kein schließendes Tag braucht und was es bewirkt.
    5. Erkläre den Unterschied zwischen <head> und <body>. Wofür werden die Tags verwendet?

  1. Im folgenden HTML-Code haben sich fünf Fehler versteckt. Finde und erkläre jeden:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Meine Webseite<title>
    </head>
    <body>
      <h1>Willkommen</h1>
      <p>Das ist mein erster <strong>Webauftritt.</p></strong>
      <p>Schön, dass du da bist!
      <ul>
        <li>Punkt 1</li>
        <li>Punkt 2</li>
      </ul>
    </body>
Training: Erste eigene Webseite
  1. Erstelle aus dem folgenden, nicht ganz ernst gemeinten Text, eine Webseite. Nutze möglichst sinnvolle HTML-Tags.
  Informatikunterricht in der 8. Klasse

  Überschrift 1: Überlebensstrategien im Computerraum
  Einleitung: Informatikunterricht in der 8. Klasse ist ein gefährliches
  Pflaster. Zwischen leeren Akkus und abgestürzten Browser-Tabs, kämpfen wir
  täglich um unser digitales Überleben.

  Überschrift 2: Die wichtigsten Werkzeuge im Unterricht
  1. Die Tastenkombination Alt + Tab, um Spiele schnell vor dem Lehrer zu
     verstecken.
  2. Einen KI-Prompt, der genau so viel Halbwissen simuliert, dass das
     Ergebnis gerade noch so als ehrliche Schülerarbeit akzeptiert wird.
  3. Die Fähigkeit, so konzentriert auf einen schwarzen Bildschirm zu
     starren, dass es wie harte Arbeit aussieht.

  Abschluss: Am Ende des Tages zählt nur eins: Haben wir den Computer 
  ein- und wieder ausgeschaltet?
<!-- Deine Webseite -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Aufgabe</title>
</head>

<body>
    Nutze die Vorlage für deine eigene Webseite.
</body>
</html>
Aufgabe

Links / Quellen​