2. Unterrichtsblock: HTML-Grundgerüst und Syntax

Inhaltsverzeichnis

In diesem Block baust du eine HTML-Seite von Grund auf. Du lernst, wo Informationen für den Browser stehen, wo sichtbarer Inhalt hingehört und wie du typische Syntaxfehler findest.

Das HTML5-Grundgerüst

Eine HTML-Datei besteht aus einem äußeren html-Element. Darin liegen der head mit Dokumentinformationen und der body mit dem sichtbaren Inhalt.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meine Projektseite</title>
  </head>
  <body>
    <h1>Willkommen auf meiner Seite</h1>
    <p>Hier stelle ich mein Thema vor.</p>
  </body>
</html>

Zeile für Zeile

  • <!doctype html> aktiviert den modernen HTML-Standardmodus.
  • <html lang="de"> umfasst das Dokument und nennt seine Sprache.
  • <head> enthält Informationen für Browser und Suchdienste.
  • <meta charset="utf-8"> sorgt für die richtige Darstellung vieler Zeichen.
  • <meta name="viewport" ...> ist eine Grundlage für responsive Seiten.
  • <title> erscheint im Browser-Tab, nicht als sichtbare Überschrift.
  • <body> enthält alles, was Besucherinnen und Besucher sehen.

Elemente, Attribute und Werte

Ein HTML-Element besteht häufig aus einem Start-Tag, seinem Inhalt und einem End-Tag. Ein Start-Tag kann zusätzlich Attribute enthalten. Ein Attribut liefert Zusatzinformationen; sein Wert nennt die konkrete Information. Das Gleichheitszeichen verbindet Attribut und Wert, der Wert steht normalerweise in Anführungszeichen.

Aufbau eines HTML-Elements mit Tag, Attribut, Wert, Inhalt und End-Tag
Die Syntaxgrafik zeigt den Aufbau eines HTML-Elements mit Tag, Attribut, Wert und Inhalt.
<a href="https://example.com">Webseite öffnen</a>

<!-- a = Element, href = Attribut,
     "https://example.com" = Attributwert,
     Webseite öffnen = sichtbarer Inhalt,
     </a> = End-Tag -->

Im Beispiel ist a das Element für einen Link. href ist das Attribut für das Linkziel. Der Wert steht nach dem Gleichheitszeichen in Anführungszeichen. Der Text zwischen Start- und End-Tag ist der sichtbare Linktext. Nicht jedes Element braucht ein End-Tag: meta enthält zum Beispiel keinen sichtbaren Inhalt.

head und body unterscheiden

Der head ist der Informationsbereich des Dokuments. Dort stehen zum Beispiel Zeichensatz, Viewport und Seitentitel. Der body ist der Inhaltsbereich. Eine sichtbare Überschrift und Absätze gehören dort hinein.

BereichBeispielAufgabe
head<title>Meine Seite</title>Dokumentdaten für Browser und Suchdienste
body<h1>Willkommen</h1>Sichtbarer Inhalt der Seite

Syntax und Verschachtelung

Syntax sind die Regeln für den Aufbau des Codes. Viele Elemente haben einen Start-Tag und einen End-Tag. Das innere Element wird zuerst geschlossen.

<p>Ein <strong>wichtiges</strong> Wort.</p>

Richtig ist: strong wird innerhalb des Absatzes geschlossen. Falsch wäre <p>Ein <strong>wichtiges</p> Wort</strong>. Browser reparieren manche Fehler, aber auf diese Reparatur solltest du dich nicht verlassen.

Lesbarer Code

Einrückungen sind für den Browser nicht zwingend, machen die Struktur aber sichtbar. Kommentare werden nicht auf der Seite angezeigt und sollten nur an Stellen stehen, die eine kurze Erklärung brauchen.

<main>
  <h1>Mein Thema</h1>
  <p>Eine kurze Einführung.</p>
</main>

<!-- Dieser Hinweis steht nur im Quellcode. -->

Tags in HTML5

Die folgenden Beispiele zeigen wichtige Tags aus dem Grundlagenteil. Du musst nicht alle Tags auswendig lernen. Entscheidend ist, dass du ihren Zweck erkennst und für deinen Inhalt das passende Element auswählst.

HTML-Haupt-Tags

Diese Elemente bilden den äußeren Rahmen einer vollständigen HTML-Datei. head und body liegen innerhalb des html-Elements und dürfen nicht vertauscht werden.

<!doctype html>
<html lang="de">
  <head>
    <!-- Informationen für den Browser -->
  </head>
  <body>
    <!-- sichtbarer Seiteninhalt -->
  </body>
</html>

Tags im HTML-head

Im head stehen Informationen über das Dokument. meta-Elemente liefern technische Angaben, title setzt den Tab-Titel und link verbindet eine externe CSS-Datei. Eine base-URL solltest du nur bewusst einsetzen, weil sie die Bedeutung aller relativen Links im Dokument verändert.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Seitentitel</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>

Tags im HTML-body zur Strukturierung

Mit strukturellen Elementen machst du die Bedeutung von Seitenbereichen deutlich. Ein header kann Einleitung und Navigation enthalten. main enthält den zentralen Inhalt und sollte pro Dokument nur einmal vorkommen. article steht für einen eigenständigen Beitrag, section für einen thematischen Abschnitt, aside für ergänzende Informationen und footer für den Abschluss.

<body>
  <header>
    <h1>Meine Website</h1>
    <nav>
      <a href="index.html">Startseite</a>
      <a href="ueber-mich.html">Über mich</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Mein Hauptthema</h2>
      <section>
        <h3>Ein Abschnitt</h3>
        <p>Hier steht der passende Inhalt.</p>
      </section>
    </article>
    <aside>Zusatzinformation</aside>
  </main>

  <footer>
    <p>Kontakt und weitere Informationen</p>
  </footer>
</body>

Tags zur Textauszeichnung

Text-Tags beschreiben die Bedeutung oder Funktion eines Textteils. Überschriften ordnen Inhalte hierarchisch, p zeichnet Absätze aus, strong markiert eine wichtige Stelle und em eine betonte Stelle. br erzeugt nur dort einen Umbruch, wo er inhaltlich gewollt ist, zum Beispiel in einer Adresse. Für Abstände ist CSS zuständig.

<h2>Text und Listen</h2>
<p>Ein <strong>wichtiger</strong> und <em>betonter</em> Satz.</p>
<p>Musterstraße 1<br>12345 Musterstadt</p>

<ul>
  <li>Ungeordneter Listenpunkt</li>
  <li>Noch ein Listenpunkt</li>
</ul>

<ol>
  <li>Erster Schritt</li>
  <li>Zweiter Schritt</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>Beschreibt die Struktur einer Webseite.</dd>
</dl>

Weitere passende Elemente sind blockquote für ein längeres Zitat, q für ein kurzes Zitat, mark für eine hervorgehobene Textstelle, abbr für eine Abkürzung und details mit summary für aufklappbare Zusatzinformationen.

<blockquote>
  Gute Struktur macht spätere Gestaltung leichter.
</blockquote>

<p>HTML ist eine <abbr title="HyperText Markup Language">Auszeichnungssprache</abbr>.</p>

<details>
  <summary>Was ist HTML?</summary>
  <p>HTML beschreibt die Struktur einer Webseite.</p>
</details>

Deine umfangreiche Praxisaufgabe

Schreibe den Code möglichst selbst, statt die fertige Lösung zu kopieren. Verwende ein eigenes Thema, zum Beispiel ein Hobby, eine Sportart, ein Spiel, ein Buch oder ein Schulprojekt. Achte auf saubere Einrückungen und speichere regelmäßig.

1. Das Dokument vorbereiten

  1. Lege einen Projektordner und darin eine Datei index.html an.
  2. Schreibe Doctype, Sprache, Zeichensatz UTF-8 und Viewport.
  3. Ergänze einen passenden title.
  4. Baue header, main und footer ein.
  5. Öffne die Datei im Browser und prüfe, ob sie geladen wird.

2. Deine Inhaltsseite aufbauen

  1. Füge im header eine sichtbare h1 und eine Navigation mit mindestens drei Links ein.
  2. Erstelle im main einen article über dein Thema und gliedere ihn mit mindestens drei section-Elementen.
  3. Verwende mehrere Absätze, eine ungeordnete Liste und eine geordnete Liste.
  4. Hebe wichtige und betonte Stellen mit strong und em hervor.
  5. Baue ein sinnvolles Zitat mit blockquote ein.
  6. Erstelle eine Definitionsliste mit dl, dt und dd, in der du einen wichtigen Begriff erklärst.
  7. Baue eine Tabelle mit Kopfzeile ein, die Informationen deines Themas übersichtlich vergleicht.

3. Zusatzinhalte und Quellen

  1. Baue fünf details-Elemente ein und nenne den Abschnitt FAQ. Jede Zusammenfassung soll eine echte Frage beantworten.
  2. Füge ein aside mit einer passenden Zusatzinformation ein.
  3. Verwende nur Bilder, Texte und Videos, deren Quelle und Nutzungsrecht du nachvollziehen kannst. Ein thematisch passendes externes Video ist freiwillig.
  4. Erstelle eine Sektion „Quellen“ und verlinke die Webseiten, aus denen deine Informationen stammen.
  5. Schreibe in den footer eine kurze Kontakt- oder Urheberangabe, aber keine echten privaten Kontaktdaten.

4. Fehler einbauen und wieder finden

  1. Lösche bei einem Absatz testweise das End-Tag und lade die Seite neu.
  2. Erstelle kurz eine falsche Verschachtelung mit strong.
  3. Beobachte die Darstellung und suche den Fehler im Quellcode.
  4. Stelle beide Fehler wieder her und rücke den betroffenen Bereich sauber ein.

Browser-Check

  • Steht <!doctype html> ganz oben?
  • Sind Sprache, Zeichensatz, Viewport und Seitentitel im head?
  • Stehen Überschrift und Absätze im body?
  • Hat jedes verschachtelte Element die richtige Reihenfolge beim Schließen?
  • Hast du die Datei gespeichert und im Browser neu geladen?

Kurz zusammengefasst

Der head beschreibt das Dokument, der body enthält den sichtbaren Inhalt. HTML-Elemente werden passend geöffnet, verschachtelt und geschlossen. Gute Einrückung hilft dir, die Struktur zu lesen und Fehler zu finden.