Um mehrere Begriffe und Beschreibungen zu gruppieren, platzieren Sie ein oder mehrere dt-Elemente vor einem oder mehreren dd-Elementen innerhalb eines dl. Diese Anleitung zeigt, wie Sie die passende Gruppierung auswählen, in TextEdit auf einem Mac ein kleines Glossar erstellen und prüfen, ob die Beziehungen klar bleiben.

Wie gruppiert eine HTML-Beschreibungsliste Begriffe?

Eine Beschreibungsliste stellt Beziehungen zwischen Namen und Werten dar. Jede Gruppe enthält mindestens einen Begriff und mindestens eine Beschreibung, wobei alle Begriffe vor den Beschreibungen stehen. Der nächste Begriff nach einer Beschreibung beginnt eine neue Gruppe. Diese Beziehungen ergeben sich aus der Reihenfolge im Dokument. HTML-Standard: Das dl-Element

In einem Glossar könnte ein Begriff ein Wort aus dem Bereich Layout sein, dessen Beschreibung dieses Wort erläutert. Mehrere aufeinanderfolgende Begriffe können sich eine Beschreibung teilen. Sie müssen dieselbe Erklärung nicht nach jedem alternativen Namen wiederholen. MDN: Beschreibungsterm-Element

Die praktische Frage lautet: Was gehört zusammen? Notieren Sie vor dem Schreiben des Markups jede beabsichtigte Beziehung in gewöhnlicher Sprache. In diesem erfundenen Beispiel teilen sich „Gap“ und „Gutter“ eine Erklärung, während „Tile“ zwei alternative Bedeutungen hat.

Beabsichtigte Beziehung Struktur innerhalb einer Gruppe
Ein Begriff mit einer Beschreibung Ein dt, dann ein dd
Mehrere Begriffe mit einer gemeinsamen Beschreibung Alle dt-Elemente, dann ein dd
Ein Begriff mit alternativen Beschreibungen Ein dt, dann mehrere dd-Elemente
Mehrere Begriffe mit gemeinsamen alternativen Beschreibungen Alle dt-Elemente, dann alle dd-Elemente
Eine Beschreibung mit mehreren Absätzen Ein dd, das die Absätze enthält

Diese Muster entsprechen den Gruppierungsregeln des Standards. Insbesondere stehen separate Beschreibungen für alternative Werte; Absätze, die zu einem Wert gehören, bleiben im selben dd. HTML-Standard: Semantik von Beschreibunglisten

Welche Beschreibungen sollten sich eine Gruppe teilen?

Verwenden Sie diese Entscheidungsfrage: Kann jede Beschreibung in der vorgeschlagenen Gruppe sinnvoll für jeden Begriff dieser Gruppe gelten? Falls nicht, teilen Sie den Inhalt in separate Gruppen auf. Diese redaktionelle Prüfung leitet sich aus dem Beziehungsmodell ab und hilft, versehentliche Zuordnungen zu erkennen, bevor sie auf der Seite erscheinen.

Mehrere Begriffe mit einer gemeinsamen Beschreibung

Dieses Fragment gibt zwei erfundenen Glossarbegriffen eine gemeinsame Erklärung. Beide Begriffe stehen vor der Beschreibung und entsprechen damit dem von MDN dokumentierten Muster mit mehreren Begriffen. MDN: Mehrere Begriffe, eine Beschreibung

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

Verstehen Sie dies nicht als zwei separate Einträge, bei denen die Beschreibungen zufällig fehlen. Das Beispiel behandelt die beiden Namen bewusst als eine Gruppe. Wenn Ihr eigenes Glossar ihnen unterschiedliche Bedeutungen zuweist, geben Sie jedem Namen eine eigene Beschreibung.

Ein Begriff mit alternativen Beschreibungen

Innerhalb derselben Gruppe kann auf eine Beschreibung eine weitere folgen. Hier verwendet das erfundene Glossar „Tile“ für zwei verschiedene Konzepte. MDN: Beschreibungselement

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

Wenn mehrere Namen dieselben Alternativen teilen, platzieren Sie die zusätzlichen Begriffe vor der ersten Beschreibung. Nehmen Sie nicht an, dass der erste Begriff nur mit der ersten Beschreibung und der zweite Begriff nur mit der zweiten Beschreibung verbunden ist: Dafür wären separate Gruppen erforderlich. MDN dokumentiert ausdrücklich die Kombination mehrerer Begriffe und Beschreibungen. MDN: Mehrere Begriffe und Beschreibungen

Eine Beschreibung mit mehreren Absätzen

Wenn der zweite Absatz die erste Erklärung erweitert, lassen Sie beide in einem dd. Ein dd nimmt Flow-Inhalte einschließlich Absätzen auf. So bleibt es eine einzige Beschreibung mit einer gut lesbaren internen Struktur. MDN: Technische Zusammenfassung des Beschreibungselements

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

Ein vollständiges Beispiel in TextEdit auf Ihrem Mac erstellen

Beginnen Sie mit einer neuen Datei, damit Sie das Ergebnis prüfen können, ohne ein vorhandenes Dokument zu ändern. Wählen Sie in TextEdit Ablage > Neu und anschließend Format > In reinen Text umwandeln. Apple beschreibt dies als Ausgangspunkt zum Erstellen einer HTML-Datei. Apple: Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten

Fügen Sie das vollständige Dokument unten ein. Es vereint die drei oben beschriebenen Entscheidungen in einem kleinen Glossar. Jede Gruppe hat einen eigenen div-Container, eine unterstützte Struktur, um Stile oder Attribute auf eine ganze Gruppe anzuwenden. MDN: Name-Wert-Gruppen umschließen

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

Wählen Sie Ablage > Sichern, nennen Sie die Datei layout-glossary.html und klicken Sie auf Sichern. Wenn TextEdit nach der zu verwendenden Erweiterung fragt, wählen Sie .html verwenden. Dies sind Apples dokumentierte Schritte zum Speichern einer selbst geschriebenen HTML-Datei. Apple: Eine HTML-Datei erstellen

Öffnen Sie die gespeicherte Datei in Ihrem Browser. Vergleichen Sie den angezeigten Text mit drei erwarteten Beziehungen: „Gap“ und „Gutter“ teilen sich eine Erklärung; „Tile“ hat zwei Beschreibungen; „Canvas“ hat eine Beschreibung mit zwei Absätzen. Prüfen Sie anhand dieses Vergleichs die beabsichtigten Inhaltsbeziehungen, auch wenn die standardmäßigen Abstände des Browsers anders aussehen als Ihr bevorzugtes Design.

Die Gruppierung beim Bearbeiten beibehalten

HTML unterstützt entweder direkte Begriff-Beschreibungs-Gruppen innerhalb von dl oder Gruppen, die in div-Elemente eingeschlossen sind. Verwenden Sie innerhalb einer bestimmten Liste durchgehend eine Struktur. In der oben gezeigten Variante mit Containern müssen die Begriffe und Beschreibungen jeder Gruppe direkt innerhalb ihres Containers bleiben; schließen Sie die Begriffe und Beschreibungen nicht in separate Container ein. HTML-Standard: Inhaltsmodell von Beschreibunglisten

Verwenden Sie bei der Überarbeitung des Beispiels diese kurze Prüfung:

  1. Suchen Sie die Gruppe, die Sie ändern möchten.
  2. Lassen Sie alle zugehörigen Begriffe vor den Beschreibungen stehen.
  3. Entscheiden Sie, ob ein neuer Erklärungstext ein weiterer Wert oder ein weiterer Absatz des aktuellen Werts ist.
  4. Fügen Sie einen neuen vollständigen Gruppe hinzu, wenn Sie einen nicht zugehörigen Begriff einführen.
  5. Sichern Sie das Dokument und laden Sie die Browser-Vorschau neu.

Wenn Sie zum Beispiel „Panel“ zwischen die beiden Beschreibungen von „Tile“ setzen, wird die beabsichtigte Beziehung unterbrochen: Die darauf folgende Beschreibung würde zur neu begonnenen Gruppe gehören. Setzen Sie einen neuen Begriff und seine Beschreibung stattdessen in einen eigenen Container. Das entspricht der Regel des Standards, dass ein Begriff, der nach einer Beschreibung erscheint, eine neue Gruppe beginnt. HTML-Standard: Gruppierungsalgorithmus

Wenn TextEdit die Datei wieder als formatierten Text öffnet, wählen Sie Ablage > Öffnen, markieren Sie das Dokument, klicken Sie auf Optionen einblenden und wählen Sie vor dem Öffnen Rich-Text-Befehle ignorieren. Wählen Sie für zukünftige Dateien unter TextEdit > Einstellungen > Öffnen und Sichern die Option HTML-Dateien als HTML-Code statt als formatierten Text anzeigen. Apple: Ein HTML-Dokument als Code anzeigen

Richten Sie die abschließende Prüfung auf die Bedeutung aus: Ermitteln Sie die Begriffe und ihre gemeinsamen Beschreibungen und vergewissern Sie sich, dass Absatzumbrüche nicht versehentlich zu separaten Werten werden. Sobald diese Beziehungen stimmen, ist das Glossar bereit für die gewünschte Formatierung des Dokuments.

Quellen