Listen

Ungeordnete Listen werden verwendet, um Listen von Elementen zu markieren, bei denen die Reihenfolge der Elemente keine Rolle spielt. Nehmen wir als Beispiel eine Einkaufsliste:

milk
eggs
bread
hummus

In diesem Beispiel können die Artikel in beliebiger Reihenfolge vorliegen. Um diese Liste in HTML zu erstellen, umschließen wir zunächst die gesamte Liste mit einem <ul>-Element (ungeordnete Liste). Dann umschließen wir jedes Element mit einem <li>-Element (Listenelement):

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

Um Ihnen etwas Übung zu verschaffen, möchten wir, dass Sie die vorherige Liste selbst markieren:

1. Klicken Sie auf "Play" in der gerenderten Code-Ausgabe unten, um das Beispiel im MDN Playground zu bearbeiten.
2. Verwandeln Sie die einzelnen Textelemente in eine ungeordnete Liste.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Wenn Sie nicht weiterkommen, schauen Sie sich noch einmal das vorherige Code-Snippet an.

milk eggs bread hummus

Geordnete Listen sind Listen, bei denen die Reihenfolge der Elemente wichtig ist. Nehmen wir als Beispiel eine Wegbeschreibung:

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

Die Markup-Struktur ist die gleiche wie bei ungeordneten Listen, außer dass Sie die Listenelemente in ein <ol>-Element anstelle von <ul> einfügen müssen:

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

Wieder Zeit zum Üben! Genau wie bei der vorherigen Aufgabe möchten wir, dass Sie die vorherige geordnete Liste selbst markieren.

1. Klicken Sie auf "Play" in der gerenderten Code-Ausgabe unten, um das Beispiel im MDN Playground zu bearbeiten.
2. Verwandeln Sie die einzelnen Textelemente in eine geordnete Liste.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Wenn Sie nicht weiterkommen, schauen Sie sich noch einmal das vorherige Code-Snippet an.

Drive to the end of the road Turn right Go straight across the first two
roundabouts Turn left at the third roundabout The school is on your right, 300
meters up the road

Nun zu einer echten Herausforderung! An diesem Punkt des Artikels haben Sie alle Informationen, die Sie benötigen, um einen etwas komplexeren Inhaltsbereich zu markieren. Wir möchten, dass Sie die Anweisungen für unser Lieblingshummus-Rezept markieren.

Sie können entweder:

• Eine lokale Kopie unserer text-start.html Startdatei speichern und die Arbeit in Ihrem Code-Editor durchführen.
• Klicken Sie auf "Play" in der gerenderten Code-Ausgabe unten, um das Beispiel im MDN Playground zu bearbeiten.

Die Anweisungen, denen Sie folgen sollen, sind:

1. Markieren Sie den Hauptseitentitel mithilfe eines <h1>-Elements und die drei Untertitel mithilfe von <h2>-Elementen.
2. Es gibt fünf Textzeilen, die sinnvollerweise mit <p>-Elementen markiert werden können. Tun Sie dies jetzt.
3. Markieren Sie die Liste der Zutaten als ungeordnete Liste.
4. Markieren Sie die Liste der Anweisungen als geordnete Liste.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Wenn Sie wirklich nicht weiterkommen, können Sie sich die Lösung unterhalb der Code-Ausgabe ansehen.

Quick hummus recipe

This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

Ingredients

1 can (400g) of chick peas (garbanzo beans)
175g of tahini
6 sundried tomatoes
Half a red pepper
A pinch of cayenne pepper
1 clove of garlic
A dash of olive oil

Instructions

Remove the skin from the garlic, and chop coarsely
Remove all the seeds and stalk from the pepper, and chop coarsely
Add all the ingredients into a food processor
Process all the ingredients into a paste
If you want a coarse "chunky" hummus, process it for a short time
If you want a smooth hummus, process it for a longer time

For a different flavor, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

Storage

Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.

Hummus is suitable for freezing; you should thaw it and use it within a couple of months.

Es ist vollkommen in Ordnung, eine Liste innerhalb einer anderen Liste zu verschachteln. Möglicherweise möchten Sie einige Unterpunkte unter einem Hauptpunkt haben. Nehmen wir die zweite Liste aus unserem Rezeptbeispiel:

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

Da die letzten beiden Punkte in sehr engem Zusammenhang mit dem vorherigen stehen (sie lesen sich wie Unteranweisungen oder Optionen, die unter diesen Punkt passen), könnte es sinnvoll sein, sie in einer eigenen ungeordneten Liste zu verschachteln und diese Liste im aktuellen vierten Punkt einzufügen. Das würde so aussehen:

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>
    Process all the ingredients into a paste.
    <ul>
      <li>
        If you want a coarse "chunky" hummus, process it for a short time.
      </li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

Versuchen Sie, zur vorherigen Aufgabe zurückzukehren und die zweite Liste auf diese Weise zu aktualisieren.

Der Zweck von Definitionslisten besteht darin, eine Reihe von Elementen und ihre zugehörigen Beschreibungen zu markieren, wie Begriffe und Definitionen oder Fragen und Antworten. Schauen wir uns ein Beispiel für eine Reihe von Begriffen und Definitionen an:

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information

Definitionslisten verwenden eine andere Umhüllung als die anderen Listentypen — <dl>; außerdem wird jeder Begriff in ein <dt>-Element (Definitionsbegriff) und jede Beschreibung in ein <dd>-Element (Definitionsbeschreibung) eingefasst.

Lassen Sie uns unser Beispiel fertig markieren:

<dl>
  <dt>soliloquy</dt>
  <dd>
    In drama, where a character speaks to themselves, representing their inner
    thoughts or feelings and in the process relaying them to the audience (but
    not to other characters.)
  </dd>
  <dt>monologue</dt>
  <dd>
    In drama, where a character speaks their thoughts out loud to share them
    with the audience and any other characters present.
  </dd>
  <dt>aside</dt>
  <dd>
    In drama, where a character shares a comment only with the audience for
    humorous or dramatic effect. This is usually a feeling, thought, or piece of
    additional background information.
  </dd>
</dl>

Die Standardstile des Browsers zeigen Definitionslisten mit etwas weiter eingerückten Beschreibungen an.

Es ist erlaubt, einen einzelnen Begriff mit mehreren Beschreibungen zu haben, zum Beispiel:

<dl>
  <dt>aside</dt>
  <dd>
    In drama, where a character shares a comment only with the audience for
    humorous or dramatic effect. This is usually a feeling, thought, or piece of
    additional background information.
  </dd>
  <dd>
    In writing, a section of content that is related to the current topic, but
    doesn't fit directly into the main flow of content so is presented nearby
    (often in a box off to the side.)
  </dd>
</dl>

Nun ist es an der Zeit, dass Sie selbst eine Definitionsliste markieren:

1. Klicken Sie auf "Play" im Codeblock unten, um das Beispiel im MDN Playground zu bearbeiten.
2. Verwenden Sie geeignete Elemente, um die drei Begriffe und vier Beschreibungen im Inhalt zu markieren. Beachten Sie, dass der dritte Begriff zwei Beschreibungen hat.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Wenn Sie wirklich nicht weiterkommen, können Sie sich die Lösung unterhalb des Codeblocks ansehen.

Love
The glue that binds the world together.
Eggs
The glue that binds the cake together.
Coffee
The drink that gets the world running in the morning.
A light brown color.

<dl>
  <dt>Love</dt>
  <dd>The glue that binds the world together.</dd>
  <dt>Eggs</dt>
  <dd>The glue that binds the cake together.</dd>
  <dt>Coffee</dt>
  <dd>The drink that gets the world running in the morning.</dd>
  <dd>A light brown color.</dd>
</dl>

Sie haben das Ende dieser Reihe von drei Artikeln über grundlegende HTML-Semantikelemente erreicht, aber erinnern Sie sich an die wichtigsten Informationen? Sie können weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Grundlagen des HTML-Textes.

Das war es zu Listen. Als nächstes gehen wir zu einer Diskussion auf höherer Ebene über. Wir haben gezeigt, wie man einige einzelne Seitenfeatures implementiert, aber was ist mit dem Strukturieren einer gesamten HTML-Seite? Die Strukturierung von Dokumenten ist als nächstes dran.

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter