Listen

bookmark_border Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Listen sind häufiger, als Sie vielleicht denken. Wenn Sie schon einmal einen Programmierkurs besucht haben, war Ihr erstes Projekt vielleicht die Erstellung einer Einkaufsliste oder einer To-do-Liste. Das sind Listen. Multiple-Choice-Tests sind in der Regel nummerierte Listen von Fragen. Die verschiedenen möglichen Antworten für jede Frage sind verschachtelte Listen.

HTML bietet uns verschiedene Möglichkeiten, Listen zu kennzeichnen. Es gibt sortierte Listen (<ol>), unsortierte Listen (<ul>) und Beschreibungslisten (<dl>). Listenelemente (<li>) sind in sortierten und unsortierten Listen verschachtelt. In einer Beschreibungsliste finden Sie Beschreibungsterme (<dt>) und Beschreibungsdetails (<dd>.). Wir gehen hier auf alle ein.

In HTML-Formularen bilden Listen von <option>-Elementen den Inhalt von <datalist>, <select> und <optgroup> innerhalb eines <select>. Diese werden unter HTML-Formulare beschrieben.

In Menüs und unsortierten Listen werden Listenelemente in der Regel mit Aufzählungszeichen dargestellt. In sortierten Listen steht in der Regel ein aufsteigender Zähler wie eine Zahl oder ein Buchstabe davor. Die Reihenfolge der Aufzählungszeichen und Nummerierungen kann mit HTML oder CSS oder beidem gesteuert oder umgekehrt werden.

Standardmäßig werden Elemente in sortierten und unsortierten Listen mit Zahlen oder Aufzählungszeichen versehen. Auch wenn Sie nicht möchten, dass Listen wie Listen aussehen, benötigen Sie möglicherweise eine Liste von Elementen, z. B. in Navigationsleisten, eine To-do-Liste mit Kästchen anstelle von Aufzählungszeichen oder Richtig/Falsch-Fragen in einem Multiple-Choice-Test. Für alle diese Listen ohne Aufzählungszeichen ist es angemessen, HTML-Listenelemente zu verwenden.

Unsortierte Listen

Das <ul>-Element ist das übergeordnete Element für ungeordnete Listen von Elementen. Die einzigen untergeordneten Elemente eines <ul>-Elements sind ein oder mehrere <li>-Listenelemente.

Erstellen wir eine Liste mit Maschinen. Wir verwenden eine ungeordnete Liste, da die Reihenfolge keine Rolle spielt (das solltest du ihnen nicht sagen).

Standardmäßig wird jedem Listenelement einer ungeordneten Liste ein Aufzählungszeichen vorangestellt. Die ungeordnete Liste hat keine elementspezifischen Attribute. Sie müssen Ihre Listen mit einem </ul> abschließen.

Nummerierte Listen

Das <ol>-Element ist das übergeordnete Element für sortierte Listen von Elementen. Die einzigen untergeordneten Elemente eines <ol>-Elements sind ein oder mehrere <li>-Elemente oder Listenelemente. Die „Aufzählungszeichen“ sind in diesem Fall jedoch Zahlen verschiedener Typen. Der Typ kann in CSS mit der Property list-style-type oder mit dem Attribut type definiert werden.

Das Attribut <ol> hat drei elementspezifische Attribute: type, reversed und start.

Das aufgezählte Attribut type legt den Nummerierungstyp fest. Es gibt fünf gültige Werte für type. Der Standardwert ist 1 für Zahlen. Sie können aber auch „a“, „A“, „i“ oder „I“ für Klein- und Großbuchstaben oder römische Ziffern verwenden. Das Attribut list-style-type bietet viel mehr Werte.

Wie im Codepen-Beispiel erwähnt, überschreibt die list-style-type-Eigenschaft den Wert des type-Attributs. Wenn Sie jedoch Dokumente erstellen, in denen der numerische Typ wichtig ist, z. B. bei rechtlichen Dokumenten, müssen Sie type angeben.

Das boolesche Attribut reversed kehrt, sofern es enthalten ist, die Reihenfolge der Zahlen um, sodass die größte Zahl zuerst angezeigt wird. Mit dem Attribut start wird der Startwert festgelegt. Der Standardwert ist 1.

Ähnlich wie bei </ul> ist das schließende </ol> erforderlich.

Wir können Listen verschachteln, aber sie müssen in einem Listenelement verschachtelt sein. Das einzige Element, das untergeordnetes Element von <ul> oder <ol> sein kann, ist ein oder mehrere <li>-Elemente.

Listenelemente

Wir haben das <li>-Element bereits verwendet, aber noch nicht offiziell eingeführt. Das <li>-Element kann ein direktes untergeordnetes Element einer unsortierten Liste (<ul>), einer sortierten Liste (<ol>) oder eines Menüs (<menu>) sein. Das <li>-Element muss als untergeordnetes Element eines dieser Elemente verschachtelt werden und ist an anderer Stelle nicht gültig.

Das Schließen eines Listeneintrags ist in der Spezifikation nicht erforderlich, da er implizit geschlossen wird, wenn der Browser auf das nächste <li>-Eröffnungstag oder das erforderliche Listenschließungstag trifft: </ul>, </ol>, </menu>. Auch wenn die Spezifikation es nicht erfordert und einige interne Best Practices des Unternehmens empfehlen, Listenelemente nicht zu schließen, um einige Byte zu sparen, sollten Sie Ihre <li>-Tags trotzdem schließen. Dadurch wird Ihr Code leichter lesbar und Ihr zukünftiges Ich wird es Ihnen danken.

Es ist einfacher, alle Elemente zu schließen, als sich zu merken, welche Tags geschlossen werden müssen und welche ein optionales schließendes Tag haben.

Es gibt nur ein elementspezifisches <li>-Attribut: value, eine Ganzzahl. Der value-Befehl ist nur für ein <li> nützlich, wenn das <li> in einer sortierten Liste verschachtelt ist. Für unsortierte Listen oder Menüs hat er keine Bedeutung. Er überschreibt den Startwert von <ol>, wenn ein Konflikt vorliegt.

Die value ist die Nummer des Listenelements in einer sortierten Liste. Setzen Sie die Nummerierung bei nachfolgenden Listenelementen mit dem festgelegten Wert fort, sofern für das Element nicht auch ein value-Attribut festgelegt ist. Die Werte müssen nicht in der richtigen Reihenfolge sein. Wenn sie es nicht sind, sollte es dafür einen guten Grund geben.

Wenn Sie reversed für das <ol>-Attribut mit value-Attributen für Listenelemente kombinieren, wird <li> im Browser auf den angegebenen Wert festgelegt. Dann wird für die vorherigen <li>-Werte hochgezählt und für die nachfolgenden heruntergezählt. Wenn ein zweiter Listeneintrag ein Wertattribut hat, wird der Zähler bei diesem zweiten Listeneintrag zurückgesetzt und der nachfolgende Wert um eins verringert.

All das lässt sich auch mit CSS-Zählern steuern, die generierten Inhalt für das ::marker-Pseudoelement bereitstellen. Wenn die Zahl nur zur Darstellung dient, verwenden Sie CSS. Verwenden Sie diese Attribute, wenn die Nummerierung semantisch wichtig ist oder eine andere Bedeutung hat.

Bisher haben wir uns Listenelemente angesehen, die nur Textknoten enthalten. Listenelemente können alle Flow-Inhalte enthalten, d. h. alle Elemente, die im Body gefunden werden und als direkt untergeordnetes Element von <body> verschachtelt werden können, einschließlich Überschriften, wodurch Inhalte unterteilt werden.

In MLW gibt es einige ungeordnete Listen. Die Lehrkräfte im Abschnitt „Instructors“ (Lehrkräfte) werden als Liste angezeigt, ebenso wie die Schüler-/Studentengeräte im Abschnitt „Reviews“ (Rezensionen). Die Lehrkraft <ul> hat zwei <li>s, eine für jede Lehrkraft. In jedem <li> haben wir ein Bild und einen Absatz:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

Im Bereich „Rezensionen“ sind drei Rezensionen zu sehen, also drei <li>. Jeder enthält ein Bild, ein Blockzitat und einen dreizeiligen Absatz mit zwei Zeilenumbrüchen.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Das Verschachteln von Listen in Listen ist ebenfalls sehr häufig. MLW enthält keine verschachtelten Listen, diese Website jedoch schon. Im ersten Modul dieser Reihe, „Übersicht über HTML“, enthält der Abschnitt „Hauptelemente“ zwei Unterabschnitte. Das Inhaltsverzeichnis ist eine ungeordnete Liste mit einer verschachtelten ungeordneten Liste mit Links zu diesen beiden Abschnitten:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Da das einzige untergeordnete Element eines <ul> ein <li> ist, befindet sich eine verschachtelte Liste immer in einem <li> und nie direkt in einem <ol> oder <ul>.

In diesem letzten Beispiel haben Sie vielleicht bemerkt, dass role="list" in <ul> enthalten ist. Die implizite Rolle von <ul> und <ol> ist list. Wenn Sie jedoch die Darstellung der Liste mit CSS entfernen, einschließlich der Einstellung von display: grid oder list-style-type: none, kann es dazu führen, dass VoiceOver (der Screenreader für iOS und MacOS) die implizite Semantik in Safari entfernt. Das ist kein Fehler, sondern eine Funktion. Im Allgemeinen sollten Sie das Attribut „role“ nicht hinzufügen, wenn Sie semantische Elemente verwenden, da es nicht erforderlich ist. Sie müssen auch nicht unbedingt eine Liste hinzufügen, es sei denn, der Nutzer muss wirklich wissen, dass es sich um eine Liste handelt, z. B. wenn er davon profitiert, die Anzahl der Elemente in der Liste zu kennen.

Beschreibungslisten

Eine Beschreibungsliste ist ein Beschreibungslistenelement (<dl>), das eine Reihe von (null oder mehr) Beschreibungsbegriffen (<dt>) und deren Beschreibungsdetails (<dd>) enthält. Die ursprünglichen Namen für diese drei Elemente waren „definition list“ (Definitionsliste), „definition term“ (Definitionsbegriff) und „definition definition“ (Definition). Der Name wurde geändert.

Wie bei geordneten und ungeordneten Listen können sie verschachtelt werden. Im Gegensatz zu geordneten und ungeordneten Listen bestehen sie aus Schlüssel/Wert-Paaren. Ähnlich wie bei <ul> und <ol> ist <dl> der übergeordnete Container. Die Elemente <dt> und <dd> sind untergeordnete Elemente von <dl>.

Wir können eine Liste von Maschinen mit ihrer Karrieregeschichte und ihren Ambitionen erstellen. Eine Beschreibungsliste von Schülern, die durch <dl> gekennzeichnet ist, umfasst eine Gruppe von Begriffen, die mit dem Element <dt> angegeben werden, sowie eine Beschreibung für jeden Begriff, der durch die Elemente <dd> angegeben wird. In diesem Fall sind die „Begriffe“ die Namen der Schüler/Studenten und die Beschreibungen die Karriereziele der einzelnen Schüler/Studenten.

Diese Beschreibungsliste ist nicht Teil der MLW-Seite. Beschreibungslisten sind nicht nur für Begriffe und Definitionen gedacht. Deshalb wurden die Namen der Elemente allgemeiner gehalten.

Beim Erstellen einer Liste mit Begriffen und ihren Definitionen oder Beschreibungen oder ähnlichen Listen mit Schlüssel/Wert-Paaren bieten die Elemente der Beschreibungsliste die entsprechende Semantik. Die implizite Rolle eines <dt> ist term. listitem ist eine weitere zulässige Rolle. Die implizite Rolle eines <dd> ist definition. Es sind keine anderen Rollen zulässig. Im Gegensatz zu <ul> und <ol> hat <dl> keine implizite ARIA-Rolle. Das ist sinnvoll, da <dl> nicht immer eine Liste ist. Wenn das der Fall ist, werden die Rollen list und group akzeptiert.

In den meisten Fällen enthalten Beschreibungslisten die gleiche Anzahl von <dt>- und <dd>-Elementen. Beschreibungslisten müssen jedoch nicht immer und nicht zwingend aus Paaren aus Begriff und Beschreibung bestehen. Es kann auch mehrere Begriffe für eine Beschreibung oder mehrere Beschreibungen für einen Begriff geben, z. B. bei einem Wörterbuchbegriff mit mehreren Definitionen.

Jeder <dt> ist mindestens ein <dd> zugeordnet und jedem <dd> ist mindestens ein <dt> zugeordnet. Es ist zwar möglich, mit dem Kombinator für benachbarte Geschwister oder dem relationalen Selektor :has() eine variable Anzahl dieser Elemente mit CSS anzusprechen. Bei Bedarf können Sie jedoch ein <div> als untergeordnetes Element eines <dl> und als übergeordnetes Element eines oder mehrerer <dt>- oder <dd>-Elemente (oder beider) einfügen. Das <dl>-Element kann auch einige andere untergeordnete Elemente haben: Das Einbetten von <div>-, <template>- oder <script>-Elementen ist zulässig. Keines der Elemente der Beschreibungsliste hat elementspezifische Attribute.

Nachdem Sie sich mit Links und Listen vertraut gemacht haben, können wir die beiden Elemente kombinieren, um eine Navigation zu erstellen.

Wissen testen

Testen Sie Ihr Wissen zu Listen.