Zusammenfassung des letzten Dokumentumriss-Chatters

Quellknoten: 1586057

HTML-Überschriften sind nicht alltäglich das Thema Tag, aber mein Ordner mit gespeicherten Links sammelt Artikel über die vor kurzem fusioniert Entfernung des Dokumentgliederungsalgorithmus im WHATWG Living Standard.

Zunächst einmal sollten Sie wissen, dass der Algorithmus nie wirklich existiert hat. Sicher, es war in der Spezifikation. Und sicher, es gab eine Warnung vor der Verwendung in der Spezifikation. Aber kein Browser hat es je implementiert Bruce Lawson erinnerte uns daran. Wir haben die ganze Zeit in einer flachen Dokumentenstruktur gelebt.

Das ist sehr Schnee von gestern. Adrian Roselli hat über den Mythos der Dokumentenumrisse geschrieben Seit 2013. Aber es ist sein Beitrag von 2016 mit dem Titel „Es gibt keinen Dokumentgliederungsalgorithmus“ das es umfassend buchstabiert und regelmäßig mit zusätzlichen Kontextnuggets über die Gespräche und Kämpfe aktualisiert wurde, die uns hierher geführt haben. Das ist wirklich die beste Zeitleiste der Saga. Amelia Bellamy-Royds hat auch tauchte in die Wurzeln des Dilemmas ein in der Vergangenheit hier auf CSS-Tricks.

Ich denke sofort an all die Arbeit, die in die Erstellung eines Dokumentgliederungsalgorithmus geflossen ist, der die Unterteilung unterstützt. Es aus der Spezifikation zu entfernen, ist sicherlich der richtige Aufruf, aber es schmälert nicht die herkulischen Anstrengungen, die darin steckten, auch wenn es jetzt in irgendeiner Versionsgeschichte begraben ist. Ich denke auch an all die Leute mit guten Absichten, die im Laufe der Zeit fälschlicherweise über den Algorithmus geschrieben haben (einschließlich auf genau dieser Seite!), in der Erwartung, dass er gleich um die Ecke war. Es gibt fast sieben Jahre geistiger und technischer Schulden, die wir durch scheinbar mangelndes Handeln angehäuft haben.

Mit Blick auf die „Neuigkeit“, dass der Algorithmus offiziell nicht mehr existiert, beklagt Bruce, dass es kein Generikum gibt <h> Element oder ähnliches, das unterteilt werden kann, um die richtige Überschriftsebene zu erzeugen. Ich stimme zu. Mit einem <h1> Element existiert im Wesentlichen als exponiert <title> ist einschränkend, insbesondere da Seiten so selten um einen einzelnen Artikel mit einer einzigen Überschrift auf oberster Ebene herum strukturiert sind. Ich zucke oft jedes Mal zusammen, wenn ich eine Art Kartenkomponente mache, wo ich sie verwende <h3> mag technisch korrekt sein, fühlt sich aber nicht in Ordnung an. Und das ist, bevor wir überhaupt über die Gestaltungsüberlegungen sprechen, bei denen eine niedrigere Überschriftenebene jetzt wie eine deutlich höhere Überschriftenebene aussehen muss.

Apropos Heading-Level-Management, Steve Faulkner (der die PR verfasst hat, die den Algorithmus aus der Spezifikation herausgezupft hat) hat a super praktischer Überblick über die Verwendung der <hgroup> Element um Überschriftenmuster zu handhaben, die Unterüberschriften, Untertitel, alternative Titel und Taglines enthalten. Ich bin sicher, Sie haben Markup wie dieses in freier Wildbahn gesehen:

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

Das passt nicht zu einer flachen Dokumentgliederung, die von Überschriftenebenen bestimmt wird. Jede dieser Überschriften stellt einen Abschnitt dar, der eine Informationshierarchie bildet:

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

Was wir stattdessen wollen, ist ein Gruppe von Überschriften. Stichwort <hgroup> Element:

Wenn in a verschachtelt <hgroup> Element, das <p> Der Inhalt des Elements stellt eine Unterüberschrift, einen alternativen Titel oder einen Slogan dar, die nicht in der Dokumentgliederung enthalten sind.

Wir erhalten also diese Struktur:

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

<hgroup> is role=generic im Moment, aber Steve weist auf einen Vorschlag hin das könnte es abbilden role=group. Wenn dies geschieht, ermöglicht der Zugänglichkeitsbaum der Hilfstechnologie, diesen Absätzen mehr semantische Bedeutung zuzuweisen als den Untertitel- und Tagline-Teilen, die sie sind. Klingt einfach, aber Steve bemerkt Herausforderungen, die im Weg stehen. Er demonstriert auch, wie diese Art von Muster heute mit ARIA-Attributen implementiert werden könnte.

Solange wir die Dinge aufrunden, hat Matthias Ott ein paar Tipps veröffentlicht Erstellen einer strukturierten Gliederung mit Überschriften. Am Ende finden Sie eine großartige Liste von Tools, mit denen Sie Ihre Überschriftenumrisse überprüfen können.

Zeitstempel:

Mehr von CSS-Tricks