Text, Links, Bilder und Listen

Das Gerüst steht, jetzt kommt der Inhalt. Die Startseite bekommt ein Bild, Listen und Links.

Was du am Ende kannst

• Text nach seiner Bedeutung auszeichnen
• relative und absolute Links richtig setzen
• Bilder mit sinnvollem Alternativtext einbinden
• die passende Listenart wählen

Live-Coding zum Mitmachen

⤓ demo-02-inhalte.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: bilder/laufstrecke.svg, index.html

Text auszeichnen

Textelemente

<h3>Wichtig oder betont?</h3>
<p>Der Lauf findet <strong>bei jedem Wetter</strong> statt, außer bei <em>Gewitter</em>.</p>
<p>Zeit über 5 km: <code>00:28:14</code>, gemessen am <time datetime="2026-06-20">20. Juni</time>.</p>
<blockquote>
  <p>Der schwerste Schritt ist der aus der Haustür.</p>
</blockquote>
<hr>
<p>Erste Zeile<br>Zweite Zeile, im selben Absatz</p>

Block-Elemente für Abschnitte:

Element	Bedeutung
p	Absatz
blockquote	längeres Zitat
hr	thematischer Bruch

Inline-Elemente für Wörter innerhalb eines Abschnitts:

Element	Bedeutung
strong	wichtig (fett dargestellt)
em	betont (kursiv dargestellt)
code	Code oder Maschinentext
time	Zeitangabe, die Maschinen über datetime lesen können
br	Zeilenumbruch innerhalb eines Absatzes, für Adressen oder Gedichte

b und i gibt es auch, sie tragen aber keine Betonung. Wenn du fett oder kursiv nur wegen der Optik willst, nimm CSS.

Sonderzeichen: Die Zeichen < und & musst du als < und & schreiben. Umlaute und „€“ tippst du dank UTF-8 einfach ein.

Links

Links sind Inline-Elemente: Sie stehen im Text eines Absatzes oder eines Listeneintrags.

<a href="termine.html">Termine</a>                    <!-- relativ: gleicher Ordner -->
<a href="vereine/satzung.html">Satzung</a>            <!-- relativ: Unterordner -->
<a href="../index.html">Zurück zum Start</a>          <!-- relativ: ein Ordner höher -->
<a href="https://example.org/">Andere Website</a>     <!-- absolut -->
<a href="#termine">Zu den Terminen</a>                <!-- Anker auf dieser Seite -->
<a href="mailto:info@morgenrunde.example">E-Mail</a>  <!-- öffnet das E-Mail-Programm -->

Innerhalb deiner Website nimmst du relative Links: Die Site funktioniert dann auch, wenn sie umzieht. Ein Anker braucht ein Ziel, also ein Element mit passender id.

Der Linktext soll allein verständlich sein. Screenreader-Nutzer lassen sich oft alle Links einer Seite auflisten, und da hilft „hier“ niemandem.

• Schlecht: Unsere Termine findest du <a>hier</a>.
• Gut: Hier findest du <a>unsere Termine</a>.

Bilder

<img src="bilder/laufstrecke.svg" alt="Eine Läuferin auf einem Weg durch den Park."
     width="800" height="400">

Attribut	Warum
src	der Pfad zum Bild
alt	Text für alle, die das Bild nicht sehen. Pflicht
width, height	reservieren den Platz, damit die Seite beim Laden nicht springt

Der gute Alternativtext beschreibt, was das Bild in diesem Zusammenhang sagt, und zwar kurz. Nicht „Bild von …“. Ein Bild, das nur schmückt, bekommt ein leeres alt="", dann überspringt es der Screenreader. Fehlt alt ganz, liest er oft den Dateinamen vor.

Formate:

Format	Geeignet für
JPEG	Fotos
PNG	Grafiken mit Transparenz, Screenshots
WebP, AVIF	modern und deutlich kleiner als JPEG und PNG
SVG	Logos, Icons und Illustrationen: Vektoren, scharf in jeder Größe

figure und figcaption verbinden ein Bild mit einer sichtbaren Bildunterschrift.

Listen

Die drei Listenarten

<ul>
  <li>Ungeordnet: Reihenfolge egal</li>
  <li>Laufschuhe</li>
</ul>
<ol>
  <li>Geordnet: Reihenfolge zählt</li>
  <li>Aufwärmen</li>
</ol>
<dl>
  <dt>Pace</dt>
  <dd>Beschreibungsliste: Begriff und Erklärung</dd>
</dl>

Listen sind häufiger, als man denkt: Ein Menü ist eine Liste von Links, und auch Karten oder Suchergebnisse sind Listen. Screenreader kündigen an: „Liste mit fünf Einträgen“, das hilft bei der Orientierung.

Live-Coding: Die Startseite wird lebendig

index.html

  <main>
    <h1>Gemeinsam in den Tag laufen</h1>
    <p>Wir laufen dreimal pro Woche durch den Stadtpark – egal ob du gerade anfängst oder für deinen ersten Marathon trainierst.</p>

    <figure>
      <img src="bilder/laufstrecke.svg" alt="Eine Läuferin auf einem Weg durch den Park, die Sonne geht gerade auf." width="800" height="400">
      <figcaption>Unsere Hausstrecke im Stadtpark, 5 Kilometer ohne Autoverkehr.</figcaption>
    </figure>

    <section>
      <h2>Das erwartet dich</h2>
      <ul>
        <li>Drei feste Lauftermine pro Woche</li>
        <li>Gruppen für <strong>jedes Tempo</strong></li>
        <li>Kostenloses Probetraining</li>
      </ul>
    </section>

    <section>
      <h2>So kommst du dazu</h2>
      <ol>
        <li>Einen <a href="termine.html">passenden Termin</a> aussuchen.</li>
        <li>Zum Treffpunkt am Parkeingang kommen.</li>
        <li>Loslaufen – <em>ganz ohne Anmeldung</em>.</li>
      </ol>
      <p>Fragen? Schreib an <a href="mailto:info@morgenrunde.example">info@morgenrunde.example</a>.</p>
    </section>

Übung

Starter für die Übung

⤓ uebung-02-inhalte.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: ausruestung.html, bilder/laufstrecke.svg, bilder/schuhe.svg, index.html

Der Verein möchte eine Seite „Ausrüstung“. Das Gerüst liegt in ausruestung.html, ein Bild in bilder/schuhe.svg. Die Texte darfst du selbst schreiben.

Stufe 1: Grundlage

Ergänze eine Einleitung mit einem wichtigen Wort (strong), das Bild mit gutem Alternativtext und eine ungeordnete Liste „Das solltest du dabeihaben“.

Stufe 2: Links

Baue einen internen Link zum Kontaktformular und einen externen Link ein. Achte auf aussagekräftige Linktexte.

Stufe 3: Bildunterschrift

Setze das Bild in ein figure mit figcaption.

Für Schnelle

Erkläre die Begriffe „Pace“ und „Intervall“ in einer Beschreibungsliste. Gib ihrer Überschrift eine id und setze einen Anker-Link darauf.