HTML - Unsortierte Listen

Leon A. - July 19, 2024

Erstellen einer ungeordneten Liste

Um eine ungeordnete Liste in HTML zu erstellen, verwendet man das <ul>-Tag, das für "unordered list" (ungeordnete Liste) steht. Das <ul>-Tag ist ein Container für Listenelemente, die durch das <li>-Tag dargestellt werden. Jedes <li>-Tag repräsentiert ein einzelnes Element in der Liste.

Beispiel: Einfache ungeordnete Liste in HTML

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Wenn dieser Code in einem Webbrowser angezeigt wird, erscheint eine Aufzählungsliste mit drei Elementen:

Element 1
Element 2
Element 3

Der Standard-Aufzählungspunktstil für ungeordnete Listen ist ein ausgefüllter Kreis, aber Sie können den Aufzählungspunktstil mit CSS ändern, was wir im nächsten Abschnitt behandeln werden.

Die <li>-Tags müssen direkte Kinder des <ul>-Tags sein. Sie können keine anderen Elemente oder Text direkt innerhalb des <ul>-Tags haben, ohne sie in <li>-Tags einzuschließen.

Sie können so viele Listenelemente wie nötig innerhalb des <ul>-Tags hinzufügen. Jedes <li>-Tag erstellt einen neuen Aufzählungspunkt und eine neue Zeile für das entsprechende Listenelement.

Gestaltung von ungeordneten Listen

Standardmäßig werden ungeordnete Listen in HTML mit ausgefüllten runden Aufzählungspunkten angezeigt. Sie können jedoch mit CSS das Aussehen dieser Aufzählungspunkte ändern, um sie an das Design Ihrer Website anzupassen oder die Liste optisch zu verbessern.

Um den Stil der Aufzählungspunkte einer ungeordneten Liste zu ändern, verwenden Sie die CSS-Eigenschaft list-style-type. Diese Eigenschaft akzeptiert verschiedene Werte, die die Form oder den Stil der Aufzählungspunkte bestimmen. Einige häufig verwendete Werte sind:

Wert	Beschreibung
`disc`	Der standardmäßige ausgefüllte runde Aufzählungspunkt
`circle`	Ein leerer kreisförmiger Aufzählungspunkt
`square`	Ein ausgefüllter quadratischer Aufzählungspunkt
`none`	Entfernt die Aufzählungspunkte

Beispiel: Ändern des Aufzählungszeichenstils einer ungeordneten Liste mit CSS

<html>
<head>
  <style>
    ul.circle {
      list-style-type: circle;
    }
    ul.square {
      list-style-type: square;
    }
    ul.none {
      list-style-type: none;
    }
  </style>
</head>
<body>
  <ul class="circle">
    <li>Eintrag 1</li>
    <li>Eintrag 2</li>
    <li>Eintrag 3</li>
  </ul>

  <ul class="square">
    <li>Eintrag 1</li>
    <li>Eintrag 2</li>
    <li>Eintrag 3</li>
  </ul>

  <ul class="none">
    <li>Eintrag 1</li>
    <li>Eintrag 2</li>
    <li>Eintrag 3</li>
  </ul>
</body>
</html>

Neben der Änderung des Aufzählungszeichenstils können Sie auch die Farbe und Größe der Aufzählungspunkte mit CSS anpassen. Um die Farbe zu ändern, verwenden Sie die color-Eigenschaft für die <li>-Elemente oder das <ul>-Element selbst. Um die Größe zu ändern, können Sie die font-size-Eigenschaft für die <li>-Elemente verwenden.

Beispiel: Ändern der Farbe und Größe von Aufzählungspunkten

<html>
<head>
  <style>
    ul {
      color: blue;
    }
    li {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <ul>
    <li>Eintrag 1</li>
    <li>Eintrag 2</li>
    <li>Eintrag 3</li>
  </ul>
</body>
</html>

In diesem Beispiel werden die Aufzählungspunkte in blauer Farbe angezeigt, und die Listeneinträge haben eine Schriftgröße von 20 Pixeln.

Denken Sie daran, dass Sie mit CSS-Klassen oder IDs bestimmte ungeordnete Listen oder Listenelemente gezielt ansprechen können, um verschiedenen Listen auf derselben Seite unterschiedliche Stile zuzuweisen.

Durch die Verwendung von CSS zur Gestaltung Ihrer ungeordneten Listen können Sie diese optisch ansprechend gestalten, an das Design Ihrer Website anpassen und die Benutzererfahrung verbessern.

Verschachtelte ungeordnete Listen

In HTML können Sie verschachtelte ungeordnete Listen erstellen, indem Sie ein <ul>-Element innerhalb eines <li>-Elements einer anderen ungeordneten Liste platzieren. Dies ermöglicht es Ihnen, eine Hierarchie von Listen und Unterpunkten zu erstellen.

Bei der Verschachtelung ungeordneter Listen ist es wichtig, über die Einrückung und die Hierarchie der Listenelemente nachzudenken. Jede verschachtelte Liste sollte eingerückt sein, um zu zeigen, dass sie eine Unterliste des übergeordneten Listenelements ist. Dies hilft, die Struktur der Liste klar und leicht verständlich zu machen.

Beispiel einer verschachtelten ungeordneten Liste

<ul>
  <li>Obst
    <ul>
      <li>Äpfel</li>
      <li>Bananen</li>
      <li>Orangen</li>
    </ul>
  </li>
  <li>Gemüse
    <ul>
      <li>Karotten</li>
      <li>Brokkoli</li>
      <li>Spinat</li>
    </ul>
  </li>
  <li>Milchprodukte
    <ul>
      <li>Milch</li>
      <li>Käse</li>
      <li>Joghurt</li>
    </ul>
  </li>
</ul>

Wir haben eine Hauptliste mit drei Listenelementen: Obst, Gemüse und Milchprodukte. Jedes dieser Listenelemente enthält eine verschachtelte ungeordnete Liste mit spezifischeren Elementen, die zur übergeordneten Kategorie gehören.

Wenn diese verschachtelte Liste in einem Webbrowser dargestellt wird, sieht sie so aus:

Obst
- Äpfel
- Bananen
- Orangen
Gemüse
- Karotten
- Brokkoli
- Spinat
Milchprodukte
- Milch
- Käse
- Joghurt

Beachten Sie, wie die Unterpunkte eingerückt sind, um zu zeigen, dass sie zum übergeordneten Listenelement gehören. Dies macht die Hierarchie der Liste deutlich und hilft Benutzern, die Beziehung zwischen den Hauptkategorien und ihren Unterpunkten zu verstehen.

Sie können ungeordnete Listen so tief verschachteln, wie Sie es benötigen, aber es ist im Allgemeinen am besten, die Verschachtelung auf ein vernünftiges Maß zu beschränken, um zu vermeiden, dass die Liste zu komplex oder schwer zu verfolgen wird. Wenn Sie feststellen, dass Sie Listen mehr als 2 oder 3 Ebenen tief verschachteln, überlegen Sie, ob es möglicherweise eine bessere Möglichkeit gibt, die Informationen zu organisieren.

Bei der Gestaltung verschachtelter ungeordneter Listen mit CSS können Sie die Unterlisten getrennt von der Hauptliste ansprechen. Sie könnten beispielsweise einen anderen Aufzählungszeichenstil oder eine andere Farbe für Unterlisten verwenden, um sie hervorzuheben oder eine visuelle Hierarchie zu erstellen.

Verschachtelte ungeordnete Listen sind ein nützliches Werkzeug, um Informationen klar und strukturiert zu organisieren und zu präsentieren. Durch die Verwendung von Einrückung und Hierarchie können Sie komplexe Listen leichter verständlich und nachvollziehbar machen.

Barrierefreiheit berücksichtigen

Bei der Erstellung von ungeordneten Listen in HTML ist es wichtig, die Barrierefreiheit zu berücksichtigen. Das bedeutet, dass Ihre Listen für alle Benutzer, einschließlich derjenigen, die assistive Technologien wie Bildschirmlesegeräte verwenden, leicht zu verstehen und zu navigieren sein sollten.

Ein wichtiger Aspekt bei der Erstellung barrierefreier ungeordneter Listen ist die Verwendung aussagekräftiger Listenelemente. Jedes <li>-Element sollte einen klaren und prägnanten Text enthalten, der den Zweck oder Inhalt dieses Listenelements vermittelt. Vermeiden Sie leere Listenelemente oder Listenelemente, die nur Bilder oder Symbole ohne Textalternativen enthalten.

Beispiel: Einfache ungeordnete Liste

<ul>
  <li>Startseite</li>
  <li>Über uns</li>
  <li>Produkte</li>
  <li>Kontakt</li>
</ul>

Jedes Listenelement enthält ein einzelnes, beschreibendes Wort, das den Zweck dieses Elements in der Liste klar anzeigt. Dies ist hilfreich für Benutzer, die auf Bildschirmlesegeräte angewiesen sind, um durch die Seite zu navigieren.

Eine weitere wichtige Überlegung ist, die Struktur Ihrer ungeordneten Listen einfach und klar zu halten. Verwenden Sie ein einzelnes <ul>-Element, um alle Listenelemente zu enthalten, und stellen Sie sicher, dass jedes <li>-Element ein direktes Kind des <ul> ist. Vermeiden Sie das Verschachteln anderer Elemente oder Inhalte innerhalb der <li>-Elemente, es sei denn, es ist für die Bedeutung oder Struktur der Liste notwendig.

Beispiel: Verschachtelte ungeordnete Liste

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3
    <ul>
      <li>Unterelement 1</li>
      <li>Unterelement 2</li>
    </ul>
  </li>
</ul>

Dieses Beispiel zeigt eine einfache Listenstruktur mit drei Hauptelementen, wobei das dritte Element eine verschachtelte Unterliste enthält. Die Struktur ist klar und leicht zu verstehen, auch für Benutzer, die das visuelle Layout der Liste möglicherweise nicht sehen können.

Es ist am besten, zu viele Verschachtelungen von ungeordneten Listen zu vermeiden. Obwohl es in Ordnung ist, verschachtelte Listen zu verwenden, um hierarchische Beziehungen zu zeigen oder komplexe Informationen zu organisieren, kann zu viel Verschachtelung die Liste schwer zu verfolgen und zu verstehen machen, besonders für Benutzer, die auf assistive Technologien angewiesen sind.

Als allgemeine Regel sollten Sie versuchen, die Verschachtelung auf nicht mehr als 2 oder 3 Ebenen zu begrenzen. Wenn Sie mehr als das benötigen, überlegen Sie, ob es möglicherweise eine bessere Möglichkeit gibt, die Informationen zu organisieren oder zu präsentieren, wie zum Beispiel sie in mehrere Listen aufzuteilen oder stattdessen Überschriften und Absätze zu verwenden.

Beispiele und Anwendungen

Ungeordnete Listen werden an vielen Stellen auf Websites und in digitalen Inhalten verwendet. Hier sind einige Möglichkeiten, wie ungeordnete Listen helfen:

Navigationsmenüs

Ungeordnete Listen werden verwendet, um Navigationsmenüs auf Websites zu erstellen. Sie ermöglichen es, eine Liste von Links oder Menüpunkten übersichtlich und leicht anklickbar zu organisieren und anzuzeigen.

Beispiel: Einfaches Navigationsmenü

<ul>
  <li><a href="/">Startseite</a></li>
  <li><a href="/about">Über uns</a></li>
  <li><a href="/services">Leistungen</a></li>
  <li><a href="/contact">Kontakt</a></li>
</ul>

Jeder Menüpunkt ist in einem <li>-Element eingebettet, und die Links werden mit dem <a>-Element erstellt, wobei das entsprechende href-Attribut auf die passende Seite oder den passenden Abschnitt der Website verweist.

Feature-Listen

Bei der Präsentation von Funktionen oder Vorteilen eines Produkts, einer Dienstleistung oder eines Konzepts eignen sich ungeordnete Listen hervorragend, um die Informationen in einem kurzen und leicht lesbaren Format darzustellen.

Beispiel: Liste der Hauptfunktionen

<h3>Hauptfunktionen:</h3>
<ul>
  <li>Responsives Design</li>
  <li>Einfache Anpassung</li>
  <li>SEO-freundlich</li>
  <li>24/7 Support</li>
</ul>

Diese ungeordnete Liste zeigt die Hauptfunktionen eines Produkts oder einer Dienstleistung und ermöglicht es den Lesern, die wichtigsten Punkte schnell zu erfassen.

Aufzählungslisten in Artikeln

Beim Verfassen von Artikeln, Blogbeiträgen oder anderen Inhalten können Aufzählungspunkte helfen, lange Absätze aufzulockern und die Informationen für die Leser leichter scanbar und verständlich zu machen.

Beispiel: Tipps für Social-Media-Strategie

<p>Beachten Sie für eine gute Social-Media-Strategie Folgendes:</p>
<ul>
  <li>Definieren Sie Ihre Zielgruppe</li>
  <li>Setzen Sie klare Ziele und Vorgaben</li>
  <li>Wählen Sie die richtigen Social-Media-Plattformen</li>
  <li>Erstellen Sie ansprechende und relevante Inhalte</li>
  <li>Überwachen und analysieren Sie Ihre Leistung</li>
</ul>

Durch die Verwendung einer ungeordneten Liste werden die Hauptpunkte klar getrennt und sind leicht zu lesen, wodurch der Inhalt für den Leser ansprechender und handlungsorientierter wird.

Achten Sie darauf, dass Ihre Listenpunkte kurz, relevant und leicht verständlich sind. Verwenden Sie aussagekräftigen Text innerhalb der <li>-Elemente und überlegen Sie, CSS zu verwenden, um die Aufzählungspunkte zu gestalten und das Aussehen Ihrer ungeordneten Listen an das Design und Branding Ihrer Website anzupassen.