Outline raus! Dafür ist hgroup wieder da! von Matthias Scharwies, 22.07.2022 06:31

22. Juli 2022 3 Kommentare

Outline raus! Dafür ist hgroup wieder da!

… 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!

whatwg/html: replace current outline algorithm with one based on heading levels #7829 ↩︎
WHATWG: the-hgroup-element ↩︎

eingeordnet unter:

html

veröffentlicht von Matthias Scharwies

Antwort verfassen Antwort mit Zitat verfassen

Nichts gegen den Artikel ... aber
Raketenwilli 01.08.2022 13:53 (Versionen)

html
– 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

–
Informationen zu den Bewertungsregeln
1. Nichts gegen den Artikel ... aber
  
  Rolf B 01.08.2022 14:15
  
  html
  – 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
  
  –
  Informationen zu den Bewertungsregeln
  1. Nichts gegen den Artikel ... aber
    
    Matthias Scharwies E-Mail-Adresse des Autors 01.08.2022 17:45
    
    html
    
    – 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
    
    –
    Informationen zu den Bewertungsregeln