Rundown über aktuelle Diskussionen zur Dokumentenstruktur 

Es passiert nicht jeden Tag, dass HTML-Überschriften das Thema des Tages sind, aber in meinem Ordner mit gespeicherten Links sammeln sich Artikel über die kürzlich beschlossene Entfernung des Dokumentstruktur-Algorithmus (Document Outline Algorithm) im WHATWG Living Standard.

Zuerst einmal sollten Sie wissen, dass der Algorithmus nie wirklich existiert hat. Sicher, er war Teil der Spezifikation. Und sicher, es gab eine Warnung in der Spezifikation bezüglich seiner Verwendung. Aber kein Browser hat ihn jemals implementiert, wie Bruce Lawson uns in Erinnerung rief. Wir haben die ganze Zeit in einer flachen Dokumentenstruktur gelebt.

Das sind sehr alte Nachrichten. Adrian Roselli schreibt bereits seit 2013 über den Mythos der Dokumentenstruktur hier. Aber es ist sein Beitrag von 2016 mit dem Titel „There Is No Document Outline Algorithm“, der ihn umfassend darlegt und regelmäßig mit zusätzlichen Kontextinformationen über die Gespräche und Schwierigkeiten aktualisiert wurde, die uns hierher gebracht haben. Dies ist wirklich die beste Zeitleiste der Saga. Amelia Bellamy-Royds hat sich auch in der Vergangenheit hier auf CSS-Tricks mit den Wurzeln des Dilemmas befasst.

Meine Gedanken gehen sofort zu all der Arbeit, die in die Entwicklung eines Dokumentenstruktur-Algorithmus geflossen ist, der Sektionen unterstützt. Ihn aus der Spezifikation zu entfernen ist sicherlich die richtige Entscheidung, aber das mindert nicht die herkulischen Anstrengungen, die dafür aufgewendet wurden, auch wenn er nun in irgendeiner Versionshistorie vergraben ist. Ich denke auch an all die gutmeinenden Leute, die im Laufe der Zeit fälschlicherweise über den Algorithmus geschrieben haben (auch auf dieser Seite!), in der Erwartung, dass er kurz bevorstand. Wir haben fast sieben Jahre mentale und technische Schulden angehäuft, die aus einem scheinbaren Mangel an Handlungsbedarf resultieren.

Wenn wir über die "Nachricht" hinausblicken, dass der Algorithmus offiziell nicht mehr existiert, beklagt Bruce, dass es kein generisches <h> Element oder etwas Ähnliches gibt, das segmentiert werden kann, um die richtige Überschriftenebene zu erzeugen. Ich stimme zu. Ein <h1> Element, das im Grunde wie ein offengelegtes <title> existiert, ist einschränkend, insbesondere da Seiten selten um einen einzelnen Artikel mit einer einzelnen Top-Level-Überschrift herum strukturiert sind. Ich finde mich oft windend, jedes Mal, wenn ich eine Art Kartenkomponente erstelle, bei der die Verwendung von <h3> technisch korrekt sein mag, sich aber fehl am Platz anfühlt. Und das, bevor wir überhaupt über Styling-Überlegungen sprechen, bei denen eine niedrigere Überschriftenebene nun wie eine deutlich höhere Überschriftenebene aussehen muss.

Apropos Verwaltung von Überschriftenebenen: Steve Faulkner (der den PR verfasst hat, der den Algorithmus aus der Spezifikation entfernt hat) hat einen super praktischen Überblick über die Verwendung des <hgroup> Elements zur Handhabung von Überschriftenmustern, die Unterüberschriften, Untertitel, alternative Titel und Slogans beinhalten. Ich bin sicher, Sie haben Markup wie dieses in der Praxis gesehen

<h1>Disappointingly Average</h1>
<h2>The Autobiography of Geoff Graham</h2>
<h3>by Geoff Graham</h3>

Das passt nicht zu einer flachen Dokumentenstruktur, die von Überschriftenebenen gesteuert wird. Jede dieser Überschriften repräsentiert einen Abschnitt, der eine Hierarchie von Informationen bildet.

Disappointingly Average
└── The Autobiography of Geoff Graham
    └── by Geoff Graham

Was wir stattdessen wollen, ist eine Gruppe von Überschriften. Hier kommt das <hgroup> Element ins Spiel

Wenn das <p> Element innerhalb eines <hgroup> Elements verschachtelt ist, repräsentiert der Inhalt des <p> Elements einen Untertitel, einen alternativen Titel oder einen Slogan, die nicht in die Dokumentenstruktur einbezogen werden.

So erhalten wir diese Struktur

<hgroup>
  <h1>Disappointingly Average</h1>
  <p>The Autobiography of Geoff Graham</p>
  <p>by Geoff Graham</p>
</hgroup>

<hgroup> hat derzeit role=generic, aber Steve verweist auf einen Vorschlag, der es auf role=group abbilden könnte. Wenn das geschieht, wird der Accessibility Tree assistierenden Technologien erlauben, diesen Absätzen als den Untertiteln und Slogans, die sie sind, mehr semantische Bedeutung zuzuweisen. Klingt einfach, aber Steve weist auf Hindernisse hin. Er demonstriert auch, wie ein solches Muster heute mit ARIA-Attributen implementiert werden könnte.

Da wir schon beim Zusammenfassen sind, hat Matthias Ott einige Tipps zur Erstellung einer strukturierten Gliederung mit Überschriften veröffentlicht. Am Ende finden Sie eine großartige Liste von Tools zur Überprüfung Ihrer Überschriftenstrukturen.