Station 3: Eigene HTML-Elemente hinzufügen

Erklärung

HTML besteht aus verschiedenen Elementen (Tags), die jeweils eine bestimmte Bedeutung haben.
Einige Tags strukturieren Inhalte, andere verändern, wie Text dargestellt wird.

In dieser Station lernst du:

• wie Überschriften unterschiedlich groß dargestellt werden

• wie Texte in Absätze gegliedert werden

• wie einzelne Wörter hervorgehoben werden

• warum manche Tags besser geeignet sind als andere

Technische Umsetzung (Schritt für Schritt)

1. Überschriften: <h1> bis <h6>

HTML kennt sechs Überschriftentypen:

<h1>Große Überschrift</h1>
<h2>Etwas kleiner</h2>
<h3>Noch kleiner</h3>
<h4>Überschrift Ebene 4</h4>
<h5>Überschrift Ebene 5</h5>
<h6>Kleinste Überschrift</h6>

Wichtig:

• <h1> ist die wichtigste Überschrift der Seite

• Die Zahlen zeigen die Hierarchie, nicht nur die Größe

• Man springt Überschriften nicht wild durcheinander

2. Absätze: <p>

Texte werden fast immer in Absätzen geschrieben:

<p>Dies ist ein Absatz mit einer geheimen Warnung.</p>
<p>Dies ist ein zweiter Absatz.</p>

➡ Jeder <p> beginnt automatisch in einer neuen Zeile.

3. Zeilenumbruch: <br>

Wenn du innerhalb eines Absatzes eine neue Zeile möchtest:

<p>
Mission gestartet.<br>
Keine Umkehr möglich.
</p>

Merke:

• <br> ist ein leerer Tag (kein End-Tag nötig)

4. Text hervorheben

kursiv

Hier gibt es verschiedene Ansätze. 

Klassisch:

<b>Dies wird Fett geschrieben</b>
<i> Dies wird kursiv geschrieben</i>

Inzwischen schreibt man dies aber so:

<strong>Gefahr</strong>
<em>unbekannt</em>

Warum?

• <strong> = wichtiger Inhalt

• <em> = Betonung

• Screenreader und Suchmaschinen verstehen diese besser

5. Alles zusammen in einer Box

<section class="box">
  <h2>Geheime Mission</h2>
  <p>
    <strong>Warnung:</strong><br>
    Das Portal ist geöffnet.
  </p>
  <p>
    Nur <em>wenige Auserwählte</em> kennen den Weg.
  </p>
</section>