Hacker News new | ask | show | jobs
by notpushkin 662 days ago
> Take headings, for example: in component-based development, I often don't know (and shouldn't care) what level a heading is in my reusable widget, but I am forced to choose regardless.

We could have used <h1>s everywhere with Document Outline:

  <body>
    <h1>top level heading (parent sectioning element is body)</h1>
    <section>
      <h1>2nd level heading (nested within one sectioning element)</h1> 
      ...
    </section>
  </body>
Unfortunately, this was never implemented in browsers and was removed in HTML 5.1.

https://html5doctor.com/computer-says-no-to-html5-document-o...
2 comments
extra88 662 days ago
As I mentioned in another comment, I think developers would have fucked up way too often and the hierarchy still wouldn't be right. Having the right heading levels is not something that can be solved by an algorithm, it depends on a human understanding of the content.

I agree that when developing a component, or even a discrete piece of content, you shouldn't have to care about its place in the heading hierarchy of whichever pages it appears on. But someone needs to care.

There's an HTML spec idea kicking around that's currently called `headinglevelstart`. I think the idea is you put it on an element like <section> and give it a value and the heading level of any heading element within is incremented by that amount; use `headinglevelstart="2"` and an <h1> within is treated as an h3, an <h2> as an h4, and so on (I think extending the valid heading levels from 6 to each least what ARIA supports, 9, is along for the ride). It can even be a negative value so an <h2> heading that's typically lots of other pages could be "elevated" when it's by itself on its own page by adding `headinglevelstart="-1"` to a parent.

I don't know if `headinglevelstart` is a particularly good idea or if it will happen but it's definitely an aspect of the web in need of improvement.

link
chuckadams 662 days ago
I usually just use <header> for section headers. Technically you’re supposed to put an h[1-6] tag inside a header tag, but I just drop the header text in there raw and style it with scoped CSS.
link
extra88 662 days ago
<header> and headings are very different. A heading is how you semantically signpost the beginning of a different section of content. A <header> other than one at the beginning of a page, is basically a DX convenience.

Headings are the major way people using assistive technologies can skim a page and navigate around. I think a <header> will still be treated as a landmark, even if it's inside other landmark elements, but it will be nameless so not nearly as useful.

It can be a struggle for some people in some situations to create pages with a heading level hierarchy that accurately reflects the content. Sometimes I think when there's any difficulty, authors should basically give up and follow a simple guideline: have one <h1> that says what the page is about and use <h2> for all the other headings.

The words put inside the headings are far more important than the accuracy of the heading level.

link
chuckadams 662 days ago
It looks like <header> is treated specially when it’s directly under the <body> tag, but generic everywhere else. This is actually what I want for some widgets which may be arbitrarily nested and aren’t really contributing to a hierarchy, but not others where I would want to be able to navigate between the sections using the headings. I like the idea of just using <h2> for all depths below the very top, I think I’ll start doing that for headers that should be navigation targets.

Edit: looks like that’s basically the WAI approach too, in that role=heading will default to aria-depth=2.

link
extra88 662 days ago
Yes, my recollection was wrong. There are some landmarks that can be nested inside other landmarks and still be conveyed but <header> (ARIA role "banner") isn't one of them.

Using <header> elsewhere for developer convenience is fine but that's all it is.

Headings are especially helpful for screen reader users are especially helpful but their value for sighted users are often underestimated. Developers think that by putting something in a box and by its styling that people will understand what it is, what it's for, when using a heading to put a name on it would be very clarifying.

link
spirobelv2 662 days ago
horrific ux. makes html harder to read for people that dont have the time to learn all this obscure bs.

and for screenreaders this will work maybe sometimes inconsistently. I hope visual llms solve it for our brothers and sisters with special needs. ( and for webscrapers)

BECAUSE THIS NONSENSE IS NOT SOLVING ANYTHING FOR ANYBODY

link