Kodokon kodokon.com

Text strukturieren: Überschriften, Absätze und Listen

Lerne, Text mit einer Hierarchie aus Überschriften, Absätzen und Listen zu ordnen.

7 Min. · 3 Fragen

Diese Lektion in Kodokon öffnen

Schlag ein Kochbuch auf: Da gibt es den Buchtitel, die Kapiteltitel und dann die Rezepttitel. HTML bietet dieselbe Hierarchie mit sechs Ebenen von Überschriften, von <h1> bis <h6>. Das h steht für heading (Überschrift). <h1> ist die Hauptüberschrift der Seite, <h2> eine Abschnittsüberschrift, <h3> eine Unterüberschrift und so weiter bis <h6>.

HTML
<h1>My recipe notebook</h1>
<h2>Starters</h2>
<h3>Carrot soup</h3>
<h2>Desserts</h2>
<h3>Apple pie</h3>
Eine Hierarchie von Überschriften, wie das Inhaltsverzeichnis eines Buches.

Für normalen Text verwendest du das <p>-Tag aus der vorherigen Lektion. Ein wichtiges Detail: Wenn du in deiner Datei die Eingabetaste drückst, entsteht kein neuer Absatz auf dem Bildschirm. Der Browser ignoriert Zeilenumbrüche und mehrfache Leerzeichen. Um zwei Gedanken zu trennen, musst du zwei getrennte <p>-Elemente schreiben.

HTML
<h2>Apple pie</h2>
<p>A simple recipe, perfect for beginners.</p>
<p>Allow 30 minutes of preparation in total.</p>
Eine Abschnittsüberschrift, gefolgt von zwei Absätzen.

Um Elemente aufzulisten, bietet HTML zwei Arten von Listen. Das <ul>-Tag (unordered list, ungeordnete Liste) zeigt Aufzählungspunkte an: perfekt für eine Einkaufsliste, bei der die Reihenfolge keine Rolle spielt. Das <ol>-Tag (ordered list, geordnete Liste) zeigt Nummern an: ideal für die Schritte eines Rezepts. In beiden Fällen wird jeder Eintrag der Liste mit dem <li>-Tag (list item, Listeneintrag) geschrieben.

HTML
<ul>
  <li>3 apples</li>
  <li>1 pie crust</li>
  <li>2 spoonfuls of sugar</li>
</ul>
<ol>
  <li>Preheat the oven to 180 degrees.</li>
  <li>Cut the apples into slices.</li>
  <li>Bake for 35 minutes.</li>
</ol>
Eine Aufzählungsliste für die Zutaten, eine nummerierte Liste für die Schritte.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

  1. Welches Tag verwendest du für die Hauptüberschrift einer Seite?
    • <h6>
    • <h1>
    • <p>
    • <heading>
  2. Welches Tag erstellt eine nummerierte Liste?
    • <ul>
    • <ol>
    • <li>
  3. Wie zeigst du zwei getrennte Absätze auf dem Bildschirm an?
    • Indem du in der Datei zweimal die Eingabetaste drückst
    • Indem du zwei getrennte <p>-Elemente schreibst
    • Indem du Leerzeichen zwischen den Sätzen einfügst