Home >Web Front-end >CSS Tutorial >Roundup of Recent Document Outline Chatter

Roundup of Recent Document Outline Chatter

Christopher Nolan
Christopher NolanOriginal
2025-03-11 10:20:10477browse

Roundup of Recent Document Outline Chatter

HTML titles have become popular recently because the document outline algorithm was removed in the WHATWG real-time standard.

First of all, you should know that the algorithm has never actually existed. Of course, it's in the specification. Of course, the specification also warns not to use it. But as Bruce Lawson reminds us, no browser has implemented it. We have always lived in a flat document structure.

This is already very old news. Adrian Roselli has been writing about the fallacies of document outlines since 2013. But his 2016 article titled “There is no document outline algorithm” elaborates on this in full and is regularly updated to add additional background information about related dialogue and struggles. This is indeed the best timeline for this event. Amelia Bellamy-Royds has also explored the root causes of this problem in depth on CSS-Tricks.

What I immediately thought of was all the work done to support the partitioned document outline algorithm. It is certainly the right thing to do to remove it from the specification, but that doesn't reduce the huge effort it puts in, even if it's now buried in some version history. I also think of all those who kindly write articles about the algorithm error (including on this site!) and they expect it to be coming soon. Due to the seemingly lack of action, we have accumulated nearly seven years of mental and technical debt.

Putting aside the news that "the algorithm does not exist" is, Bruce regrets that there is no common <h></h> element or similar element that can be partitioned to generate the correct title level. I agree. Having an element basically exists as an open <title></title> is binding, especially since the page is rarely structured around a single article containing a single top-level title. I often find myself feeling pain every time I make some sort of card components, and using ### in these components may be technically correct, but feels the order is wrong. This even before we discuss style considerations, where the lower title levels now need to look like different higher title levels.

Talking about title-level management, Steve Faulkner (who wrote the PR that removes the algorithm from the specification) provides a very practical overview of the title patterns involving subtitles, subtitles, alternative titles and slogans using <hgroup></hgroup> elements. I believe you've seen such a mark in practice:

<code><h1> Disappointing average</h1> <h2> Geoff Graham's autobiography</h2> <h3> Author: Geoff Graham</h3></code>

This does not match the flat document outline driven by the title level. Each title represents a part that forms the hierarchy of information:

<code>Disappointing average└──Geoff Graham’s autobiography└── Author: Geoff Graham</code>

What we want is a group title. The <hgroup></hgroup> element comes in handy:

When nested in the <hgroup></hgroup> element, the content of the element represents a subtitle, an alternative title or a slogan, which is not included in the document outline.

So we get the following structure:

<code><hgroup><h1>Disappointing average</h1> <p>Geoff Graham's autobiography</p> <p>Author: Geoff Graham</p> </hgroup></code>

<hgroup></hgroup>The current role is role=generic, but Steve points out that a proposal can map it to role=group. If this happens, assistive technology will allow assistive technology to give more semantic meaning to these paragraphs as the subtitle and slogan sections they play. It sounds simple, but Steve points out the challenges that are blocking. He also demonstrated how to implement this pattern today using ARIA properties.

As we summarize, Matthias Ott has published some tips on creating a structured outline using titles. Check out the list of excellent tools at the end about checking the title outline.

The above is the detailed content of Roundup of Recent Document Outline Chatter. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:The Basics of RemixNext article:The Basics of Remix