search

WebWeWant / webwewant.fyi

If you build websites, you inevitably run into problems. Maybe there’s no way to achieve an aspect of your design using CSS. Or maybe there’s a device feature you really wish you could tap into using JavaScript. Or perhaps the in-browser DevTools don’t give you a key insight you need to do your job. We want to hear about it!
https://webwewant.fyi
MIT License
74 stars 23 forks source link

An HTML attribute, or JS property to isolate a heading tree #559

Open WebWeWantBot opened 2 years ago

WebWeWantBot commented 2 years ago

title: An HTML attribute, or JS property to isolate a heading tree date: 2022-06-24T14:05:57.948Z submitter: Joppe Kroon number: 62b5c4c5ab5a06005b562fbb tags: [ ] discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/ status: [ discussing || in-progress || complete ] related:

The outline algorithm, i.e. restarting a heading tree in a

is clearly dead. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#multiple_h1_elements_on_one_page

But with the lines between the web and native applications blurring (PWAs), and web components promoting reuse, there is a need now more than ever for developers to be able to create heading structures that are sane without relying on nothing more than luck.

More and more, you see content/components being produced of which the author does not exactly know in which context it is going to show up. So they have to be very careful and choose a low heading level like h5 to hopefully not interfere with the heading structure of their potential contexts, thereby hamstringing the ability to structure their own content.

If you could specify on your webcomponent that the content re-starts a heading tree, you could now safely use h1 and friends again in the places where it makes sense. Without relying on acrobatics through the Light DOM, or JS to indicate what level to start off from.

If posted, this will appear at https://webwewant.fyi/wants/62b5c4c5ab5a06005b562fbb/

joppekroon commented 2 years ago

A notable example here is JIRA, where using a high heading level in an issue comment will break the structure of the page.

Another example is Wordpress, where on the overview page of blog articles every section is started with an <h1>, so that the article titles can retain the full range of headings, but intentionally breaking the document structure on that overview page.

joppekroon commented 2 years ago

The initial comment should have read:

The outline algorithm, i.e. restarting a heading tree in a <section> is clearly dead.