Riepilogo di chiacchiere sullo schema del documento recente

Non capita tutti i giorni che le intestazioni HTML siano l'argomento di giorno, ma la mia cartella di link salvati sta accumulando articoli sul recentemente fusa rimozione dell'algoritmo di struttura del documento nel WHATWG Living Standard.

Prima di tutto, dovresti sapere che l'algoritmo non è mai realmente esistito. Certo, era nelle specifiche. E certo, c'era un avviso sull'utilizzo nelle specifiche. Ma nessun browser l'ha mai implementato, come Ce lo ha ricordato Bruce Lawson. Abbiamo vissuto in una struttura di documenti piatta per tutto il tempo.

Questo è anche molto vecchie notizie. Adrian Roselli ha scritto sul mito del profilo del documento dal 2013. Ma è il suo post del 2016 intitolato "Non esiste un algoritmo di struttura del documento" che lo spiega in modo completo ed è stato aggiornato regolarmente con ulteriori pepite di contesto sulle conversazioni e le lotte che ci hanno portato qui. Questa è davvero la migliore sequenza temporale della saga. Anche Amelia Bellamy-Royds lo ha fatto approfondito le radici del dilemma in passato qui su CSS-Tricks.

La mia mente va istantaneamente a tutto il lavoro che è stato svolto nella creazione di un algoritmo di struttura del documento che supporti il ​​sezionamento. Rimuoverlo dalle specifiche è sicuramente la chiamata giusta, ma non toglie gli sforzi erculei che sono andati in esso anche se ora è sepolto nella storia delle versioni. Penso anche a tutte le persone ben intenzionate che hanno scritto erroneamente dell'algoritmo nel tempo (incluso proprio su questo sito!) Con l'aspettativa che fosse dietro l'angolo. Ci sono quasi sette anni di debiti mentali e tecnici che abbiamo accumulato da quella che sembra essere una mancanza di azione.

Guardando oltre la "notizia" che l'algoritmo ufficialmente non esiste più, Bruce si lamenta che non esiste un generico <h> elemento o simili che possono essere sezionati per produrre il livello di intestazione corretto. Sono d'accordo. Avere un <h1> l'elemento esiste essenzialmente come esposto <title> è vincolante, soprattutto perché le pagine sono così raramente strutturate attorno a un singolo articolo con un'unica intestazione di primo livello. Spesso mi ritrovo a sussultare ogni volta che realizzo una sorta di componente della carta in cui utilizzo <h3> potrebbe essere tecnicamente corretto, ma sembra fuori servizio. E questo prima ancora di parlare delle considerazioni sullo stile in cui un livello di intestazione inferiore ora deve apparire come un livello di intestazione superiore distinto.

Parlando di gestione del livello di intestazione, Steve Faulkner (autore del PR che ha estratto l'algoritmo dalle specifiche) ha un panoramica super pratica sull'utilizzo del <hgroup> elemento per gestire i modelli di intestazione che coinvolgono sottotitoli, sottotitoli, titoli alternativi, snd slogan. Sono sicuro che hai visto un markup come questo in natura:

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

Ciò non contrasta con una struttura del documento piatta guidata dai livelli di intestazione. Ognuna di queste intestazioni rappresenta una sezione che forma una gerarchia di informazioni:

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

Quello che vogliamo invece è un gruppo di intestazioni. Indica il <hgroup> elemento:

Quando nidificato all'interno di a <hgroup> elemento, il <p> il contenuto dell'elemento rappresenta un sottotitolo, un titolo alternativo o uno slogan che non sono inclusi nella struttura del documento.

Quindi, otteniamo questa struttura:

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

<hgroup> is role=generic al momento, ma Steve indica una proposta che potrebbe mapparlo su role=group. Se ciò accade, l'albero dell'accessibilità consentirà alla tecnologia assistiva di assegnare un significato più semantico a quei paragrafi come sottotitoli e tagline che sono. Sembra facile, ma Steve nota le sfide che si frappongono. Dimostra anche come questo tipo di pattern potrebbe essere implementato oggi con gli attributi ARIA.

Finché stiamo arrotondando le cose, Matthias Ott ha pubblicato alcuni suggerimenti in merito creare uno schema strutturato con intestazioni. Dai un'occhiata alla fine per un ottimo elenco di strumenti per controllare i contorni delle intestazioni.