Podsumowanie ostatnich rozmów z konspektem dokumentów

Węzeł źródłowy: 1586057

Nieczęsto tematem są nagłówki HTML dnia, ale mój folder z zapisanymi linkami gromadzi artykuły o niedawno połączone usunięcie algorytmu zarysu dokumentu w Standardzie Życia WHATWG.

Po pierwsze, powinieneś wiedzieć, że algorytm nigdy tak naprawdę nie istniał. Jasne, to było w specyfikacji. I oczywiście, w specyfikacji było ostrzeżenie o używaniu go. Ale żadna przeglądarka nigdy tego nie zaimplementowała, ponieważ Bruce Lawson nam przypomniał. Cały czas żyliśmy w płaskiej strukturze dokumentu.

To jest początku. stare wiadomości. Adrian Roselli pisał o micie zarysu dokumentu since 2013. Ale to jego post z 2016 roku zatytułowany „Nie ma algorytmu zarysu dokumentu” który wyczerpująco to wyjaśnia i był regularnie aktualizowany o dodatkowe bryłki kontekstu dotyczące rozmów i zmagań, które nas tutaj doprowadziły. To naprawdę najlepsza oś czasu sagi. Amelia Bellamy-Royds również zagłębił się w korzenie dylematu w przeszłości tutaj na CSS-Tricks.

Mój umysł natychmiast skupia się na całej pracy włożonej w tworzenie algorytmu zarysu dokumentu, który obsługuje podział na sekcje. Usunięcie go ze specyfikacji jest na pewno właściwym wezwaniem, ale nie umniejsza to herkulesowych wysiłków, które zostały w to włożone, nawet jeśli jest teraz pochowany w jakiejś historii wersji. Myślę też o wszystkich ludziach o dobrych intencjach, którzy z biegiem czasu błędnie pisali o algorytmie (również na tej samej stronie!), oczekując, że jest tuż za rogiem. Prawie siedem lat psychicznego i technicznego długu narosło nam z powodu tego, co wydaje się być brakiem działania.

Patrząc poza „wiadomość”, że algorytm oficjalnie już nie istnieje, Bruce ubolewa, że ​​nie ma generycznego <h> element lub podobny element, który można podzielić, aby uzyskać prawidłowy poziom nagłówka. Zgadzam się. Posiadanie <h1> element zasadniczo istnieje jako eksponowany <title> jest ograniczające, zwłaszcza że strony tak rzadko są zorganizowane wokół jednego artykułu z jednym nagłówkiem najwyższego poziomu. Często krzywię się za każdym razem, gdy tworzę jakiś element karty, w którym używam <h3> może być technicznie poprawny, ale wydaje się niesprawny. I to jeszcze zanim porozmawiamy o rozważaniach dotyczących stylizacji, gdzie niższy poziom nagłówka musi teraz wyglądać jak wyraźnie wyższy poziom nagłówka.

Mówiąc o zarządzaniu nagłówkami, Steve Faulkner (autor PR, który wyłuskał algorytm ze specyfikacji) ma super praktyczny przegląd korzystania z <hgroup> element do obsługi wzorców nagłówków, które obejmują podtytuły, podtytuły, alternatywne tytuły, snd slogany. Jestem pewien, że widziałeś takie znaczniki na wolności:

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

To nie pasuje do płaskiego zarysu dokumentu, który jest kierowany przez poziomy nagłówków. Każdy z tych nagłówków reprezentuje sekcję, która tworzy hierarchię informacji:

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

Zamiast tego chcemy grupa nagłówków. Wskaż <hgroup> element:

Gdy zagnieżdżone w a <hgroup> element, <p> zawartość elementu reprezentuje podtytuł, alternatywny tytuł lub slogan, które nie są zawarte w zarysie dokumentu.

Tak więc otrzymujemy tę strukturę:

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

<hgroup> is role=generic w tej chwili, ale Steve wskazuje na propozycję który mógłby to zmapować do role=group. Jeśli tak się stanie, drzewo ułatwień dostępu pozwoli technikom pomocniczym na przypisanie bardziej semantycznego znaczenia tym akapitom jako fragmentom podtytułów i sloganów, którymi są. Brzmi łatwo, ale Steve zauważa wyzwania, które stoją na drodze. Demonstruje również, w jaki sposób można dziś zaimplementować ten rodzaj wzorca za pomocą atrybutów ARIA.

Tak długo, jak podsumowujemy, Matthias Ott opublikował kilka wskazówek na temat tworzenie ustrukturyzowanego konspektu z nagłówkami. Sprawdź na końcu świetną listę narzędzi do sprawdzania konturów nagłówków.

Znak czasu:

Więcej z Sztuczki CSS