Matthias Scharwies: Outline raus! Dafür ist hgroup wieder da!

Beitrag lesen

… oder war es nie weg?

In seinem Artikel Roundup of Recent Document Outline Chatter auf css-tricks gibt Geoff Graham die neuesten Entwicklungen um den document-outline-algorithm wieder.

Dieser sollte HTML-Dokumente anhand ihrer Seitenstruktur, bzw. auf Elemente wie section, articleund aside analysieren und dann eine semantisch passende Gliederung erstellen.

Dies scheiterte an zwei Dingen: Es wurde von den Browser-Herstellern nie implementiert und mit der Überschriftenhierarchie von h1 bis h6 hätte man dies eigentlich bereits ohne Umwege bewerkstelligen können. Aus diesen Gründen wird nun der document-outline-algorithm entfernt.[1]

An seine Stelle soll eine Überschriften-basierte Gliederung treten. Dabei gibt es vor allem das Problem, dass oft mehrere Überschriften verschiedener Hierarchien verwendet werden, um Überschriften mit Untertiteln zu kombinieren:


      <h1>Willkommen in W3Docs</h1>
      <h2>Bei uns können Sie alles über HTML lernen.</h2>
      <h3>Immer aktuell mit HTML 5!</h3>

Solche Kombinationen würden ein Inhaltsverzeichnis und auch eine Gliederung durch Robots unnötig kompliziert und unübersichtlich machen.

Aus diesem Grund sollte ein umschließendes hgroup-Element nur die h1 als Überschrift erkennen. hgroup wurde aber nicht in HTML5 übernommen und galt daher als obsolet. Im Living Standard der WHATWG blieb es aber erhalten.[2]

Nachdem nun die HTML5-Spezifikation der W3C nicht weiterentwickelt wird, ist es ganz offiziell wieder dabei. Im Unterschied zu früher enthält es aber nur eine Überschrift, der ein oder mehrere Textabsätze voranstehen oder folgen:

<hgroup>
      <h1>Willkommen bei SELFHTML</h1>
      <p>Bei uns können Sie alles über HTML lernen.</p>
      <p>Immer aktuell mit dem Living Standard von HTML!</p>
</hgroup>

Der bestehende Wiki-Artikel zur document-outline wurde durch eine Weiterleitung auf HTML/Tutorials/Seitenstrukturierung ersetzt. Dieses Tutorial enthält nun auch ein Beispiel mit hgroup.

Auch der Referenz-Artikel HTML/Elemente/hgroup ist aktualisiert!


  1. whatwg/html: replace current outline algorithm with one based on heading levels #7829 ↩︎

  2. WHATWG: the-hgroup-element ↩︎