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

Weblog

Outline raus! Dafür ist hgroup wieder da!

Matthias Scharwies E-Mail-Adresse des Autors (Versionen)
– Informationen zu den Bewertungsregeln

… 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 ↩︎

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Nichts gegen den Artikel ... aber

    Raketenwilli (Versionen)
    – Informationen zu den Bewertungsregeln

    Wozu ist denn dieses <hgroup> gut?

    Ich sehe nichts, was ich nicht mit

    <!DOCTYPE html>
<html>
	<head>
		<title>Willkommen bei SELFHTML</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>

		@media screen {
			h1 span.subtitel {
				display:block;
				margin-left:2rem;
				font-size: 1.3rem;
			}
			h1 span.subtitel:before {
				content: " → ";
			}
		}

		@media screen and ( min-width: 100rem ) {
			h1 span.subtitel {
				display:inline-block;
				margin-left:0em;
				font-size: 1em;
			}
			h1 span.subtitel:before {
				content: " - ";
			}
		}


		</style>
	</head>
	<body>
		<h1>Willkommen bei SELFHTML
			<span class="subtitel">Bei uns können Sie alles über HTML lernen.</span>
			<span class="subtitel">Immer aktuell mit dem Living Standard von HTML</span>
		</h1>
	</body>
</html>

    „erschießen“ könnte.

    Dabei gibt es vor allem das Problem, dass oft mehrere Überschriften verschiedener Hierarchien verwendet werden, um Überschriften mit Untertiteln zu kombinieren

    Aha. Fehler durch Falsches ersetzen?

    Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Nichts gegen den Artikel ... aber

      Rolf B
      – Informationen zu den Bewertungsregeln

      Hallo Raketenwilli,

      dafür würdest Du - um meinen seligen Mathelehrer zu zitieren - standrechtlich mit der Bratwurst erschossen gehören.

      Die Überschrift ist "Willkommen bei Selfhtml", der Rest sind nach eigener Klassifikation Untertitel und gehören definitiv nicht ins h1 Element.

      Aber: bisher dachte ich, dass man genau für sowas einen Section-/Article-Header verwendet und hgroup dafür eigentlich hyperfluid sei.

      <article>
   <header>
      <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>
   </header>
   <p>Selfhtml ist <strong>die</strong> deutsche Referenz für
      Webtechnologien, sagt man...</p>
</article>

      Rolf

      --
      sumpsi - posui - obstruxi
      Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Nichts gegen den Artikel ... aber

        Matthias Scharwies E-Mail-Adresse des Autors
        – Informationen zu den Bewertungsregeln

        Servus!

        Aber: bisher dachte ich, dass man genau für sowas einen Section-/Article-Header verwendet und hgroup dafür eigentlich hyperfluid sei.

        <article>
   <header>
      <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>
   </header>
   <p>Selfhtml ist <strong>die</strong> deutsche Referenz für
      Webtechnologien, sagt man...</p>
</article>

        Ich auch, hatte mich eben über hgroup gewundert - geforscht und die Wiki-Seiten aktualisiert.

        Nach etwas Überlegung werde ich aber wsl. weiterhin headerverwenden! 😀

        Herzliche Grüße

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
        –
        Informationen zu den Bewertungsregeln