Einführung HTML

Eine Webseite besteht aus drei Schichten, die getrennt voneinander bearbeitet werden:

• HTML legt die Struktur und den Inhalt fest (Überschriften, Absätze, Listen, Bilder …).
• CSS bestimmt die Darstellung (Farben, Schriften, Layout).
• JavaScript ergänzt Verhalten (Interaktivität).

Dieses Kapitel behandelt HTML.

Merke: Der Code wird mit dem Editor geschrieben und im Browser betrachtet. Anleitung dazu befindet sich hier.

Basisaufbau eines HTML-Dokumentes

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World!</title>
  </head>
  <body>
    Dieser Text wird angezeigt!
    <!-- Dieser Text wird nicht angezeigt, weil er ein Kommentar ist -->
  </body>
</html>

Merke: <!DOCTYPE html> ist so kurz, weil es HTML5 ist. Ältere HTML-Versionen hatten hier eine lange, kryptische Zeile.

Elemente, Tags und Attribute

HTML-Code besteht aus Elementen. Ein Element wird meist von einem Start-Tag und einem End-Tag eingeschlossen: <p>Text</p>. Manche Elemente haben keinen Inhalt und bestehen nur aus einem Tag, z.B. <br> oder <img>.

Tags können Attribute enthalten. Diese stehen im Start-Tag in der Form name="Wert":

<a href="https://example.org">Link</a>

Hier ist href das Attribut mit dem Wert https://example.org.

Regeln:

• Elemente werden ineinander verschachtelt und in umgekehrter Reihenfolge wieder geschlossen: <p><strong>…</strong></p> (nicht <p><strong>…</p></strong>).
• Es gibt genau ein <html>-Wurzelelement.
• Ob der HTML-Code fehlerfrei ist, prüft der W3C-Validator.

Merke: Der schließende Schrägstrich bei inhaltslosen Elementen (<br />, <img … />) stammt aus älteren HTML-Versionen und ist in HTML5 nicht mehr nötig. Wir schreiben <br> und <img …>.

Block- und Inline-Elemente

Elemente verhalten sich standardmäßig auf eine von zwei Arten:

• Block-Elemente beginnen auf einer neuen Zeile und nehmen die volle verfügbare Breite ein – z.B. <p>, <h1>, <ul> und die Struktur-Elemente aus dem nächsten Abschnitt.
• Inline-Elemente stehen innerhalb einer Textzeile und sind nur so breit wie ihr Inhalt – z.B. <a>, <strong>, <em>.

Für Fälle, in denen kein passendes Element existiert, gibt es zwei allgemeine Container ohne eigene Bedeutung. Sie dienen dazu, Inhalte zu gruppieren, um sie mit CSS zu formatieren:

Textstrukturierung

<h1>Das Fahrrad</h1>
<p>Das Fahrrad ist eines der <strong>effizientesten Fortbewegungsmittel</strong>
der Welt. Erfunden wurde es <em>1817</em> von Karl Drais – damals noch
<del>ohne Pedale</del>: Man stieß sich mit den Füßen vom Boden ab.<br>
Heute gibt es unzählige Bauformen, vom Rennrad bis zum Lastenrad.</p>
<hr>
<h2>Warum Radfahren gesund ist</h2>
<p>Regelmäßiges Radfahren stärkt Herz und Kreislauf, schont die Gelenke und
verbessert die Ausdauer. Schon eine halbe Stunde pro Tag zeigt Wirkung.</p>
<blockquote>
  Wer mit dem Rad zur Schule fährt, spart Geld, vermeidet Staus und tut
  nebenbei etwas für die Umwelt.
</blockquote>
<p>Dieses kurze Zitat im Fließtext steht in <q>Anführungszeichen</q>, die der
Browser automatisch setzt. Ein Absatz beginnt mit dem Tag
<code>&lt;p&gt;</code> und endet mit <code>&lt;/p&gt;</code>.</p>

Merke: HTML-Code wird verwendet, um den Inhalt zu strukturieren und einzelnen Textabschnitten Bedeutung zuzuweisen, wie z.B. Überschriften, Paragraphen, Listen usw. HTML wird nicht zur Formatierung verwendet, dafür wird CSS eingesetzt.

Seitenstruktur (semantische Elemente)

Statt jeden Bereich mit einem allgemeinen <div> zu bauen, gibt es in HTML5 Elemente, die dem Bereich eine Bedeutung geben. Das hilft Suchmaschinen, Screenreadern und beim Lesen des Codes.

<body>
  <header>
    <h1>Meine Webseite</h1>
  </header>
  <nav>
    <a href="index.html">Start</a>
    <a href="kontakt.html">Kontakt</a>
  </nav>
  <main>
    <article>
      <h2>Überschrift des Beitrags</h2>
      <p>Inhalt …</p>
    </article>
    <aside>
      <p>Randnotiz …</p>
    </aside>
  </main>
  <footer>
    <p>&copy; 2026 Max Mustermann</p>
  </footer>
</body>

Merke: Diese Elemente verhalten sich wie <div> (Block-Element), sagen aber zusätzlich, wofür der Bereich da ist. <div> wird nur noch verwendet, wenn kein passendes semantisches Element existiert. Das Anordnen dieser Bereiche (z.B. nebeneinander) geschieht mit CSS – siehe Layout mit CSS.

Tabellen

<table>
  <caption>Beispieldaten</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Ort</th>
      <th>Fach</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aliquam</td>
      <td>Remseck</td>
      <td>Informatik</td>
    </tr>
    <tr>
      <td>Quisque</td>
      <td>Stuttgart</td>
      <td>Mathematik</td>
    </tr>
  </tbody>
</table>

Listen

<ul>
  <li>Phasellus</li>
  <li>Aenean</li>
  <li>Curabitur</li>
</ul>

Bilder & Verknüpfungen

Bilder

<img src="images/tier.jpg" alt="Ein grasender Esel auf einer Wiese">

Das Attribut alt enthält eine Textbeschreibung des Bildes. Sie wird angezeigt, wenn das Bild nicht lädt, und von Screenreadern vorgelesen. Rein dekorative Bilder erhalten ein leeres alt="".

Bild mit Bildunterschrift:

<figure>
  <img src="images/tier.jpg" alt="Ein grasender Esel auf einer Wiese">
  <figcaption>Abb. 1: Ein Esel bei der Arbeit.</figcaption>
</figure>

Verknüpfungen (Link, Hyperlink)

<a href="https://www.lmg-remseck.de/">Lise-Meitner-Gymnasium</a>

Dateien im Arbeitsordner (z.B. Bilder) werden mit einer relativen Pfadangabe verknüpft, d.h. relativ zur verknüpfenden Datei. Für Dateien im Internet wird die vollständige Webadresse (URL) angegeben – es handelt sich dann um eine absolute Verknüpfung.

Übungen

1. Baue die Startseite deines Projekts: eine <h1> mit dem Titel deiner Seite, zwei bis drei Absätze über dein Thema und ein Bild mit aussagekräftigem alt-Text.
2. Gliedere die Seite mit semantischen Elementen: <header> mit dem Titel, <main> mit dem Inhalt, <footer> mit deinem Namen.
3. Füge eine Liste ein – z.B. „Fakten über …” oder „meine Top 3”. Entscheide, ob sie geordnet (<ol>) oder ungeordnet (<ul>) sein soll.
4. Erstelle eine kleine Tabelle mit Kopfzeile: ein Steckbrief, ein Vergleich oder ein Zeitplan.
5. Setze einen Link auf eine passende externe Seite (in einem neuen Tab) und packe dein Bild in ein <figure> mit <figcaption>.
6. Prüfe die Seite mit dem W3C-Validator und behebe die gemeldeten Fehler.
7. Kür: Lege eine zweite Seite steckbrief.html an und verlinke beide Seiten gegenseitig.

studyhtml