Posted by soheilpro 4/11/2025
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
https://www.felesatra.moe/about
The "old" behavior is great because you don't need global knowledge; you can have a snippet that gets templated into various layers and still getting the right level of heading applied.
In 2025 if no screen reader works right it's a problem with the spec.
From the MDN docs on headings and paragraphs [0].
Yet this article is unclearly stating that it isn't preferred but required seeing as the places it semantically makes sense to use multiple H1 tags in a page will now log warnings to developers ( article, aside, nav etc .. )
The article mentions confusion yet the defacto documentation on the web encourages the confusion by not being more specific...
0. https://developer.mozilla.org/en-US/docs/Learn_web_developme...
Mostly this is because Tim Berners Lee probably didn't think this one through properly decades ago. And it was never really fixed. These days you can just invent your own tag names and style them of course. Which is a useful trick that is a bit underused. The structural semantics are nice for things like accessibility, SEO, and a few other things but otherwise HTML is a really poor choice of a format to exchange structural information. You generate it from other formats preferably. Writing it manually is a PITA. Even if you are a developer. Things like Markdown exist for a reason (and perpetuate the problem).
The Web has long departed from that vision however; very few pages, if any, could still be considered documents.
> Do not rely on default browser styles for conveying a heading hierarchy. Explicitly define your document hierarchy using <h2> for second-level headings, <h3> for third-level, etc.
<main>
<h1>Main Heading</h1>
section..h2... Etc
</main>
<aside>
<h1>Aside heading</h1>
section...h2...
</aside>
Mainly, I'd love for pages without any CSS to render in dark mode when the system+browser are set to dark mode.
<section name="Animals">
<section name="Mammals"> Mammals are blabla </section>
<section name="Reptiles"> Reptiles are blabla </section>
<section name="Plants">
</section>
<section name="Minerals">
</section>
In this case Animals, Plants and Minerals would be h1, and Mammals and Reptiles would be h2. If you truly wanted to separate representation from content you would do that, as it is you are not really doing that, the h1 and h2 would be creating some kind of explicit open and close tags and hierarchy in a format different than the rest of html.
If someone goes back in time could you kick that Berner's Lee on your way back from killing hitler, correcting the sign on electricity? Thanks. Also send a message to Douglas Crockford if you've got time.
<section id="animals">
<h2>Animals</h2>
<p>Here are my animal facts</p>
</section>
There's already <figure><figcaption></figure> and <table><caption></table> as examples of embedded heading. The difference there being that figure and table elements very rarely nest.
So allowing h in <section><h><section><h></section></section> to become h1 and h2 would make sense.
<input type="button" value="Submit">edit: Oh I see, yes the title shouldn't just attribute, but there is no deep reason for that, just HTML convention. I would rather what you wrote than the status quo.
A reason is that you might want formatting (bold, italics, etc) on the text of a title.
Similarly the title of a section can be displayed with bold, or not at all, or as part of the index in the front page, or at the index at the end, or in a hovering table of contents that displays while you scroll the page, and it may be bold, big, or blue or small. All of that is a matter for the styling document, not for the content document.
The content only cares that this part is the Reptile part, not whether the R in reptile will look like a dinosaur, that's a job for style="ornamented-initial:dinosaur where the loop of the R is a mouth, and the two lower lines are the feet and the tiny t rex arms.", which would probably only be interpretable by a browser connected with a stable diffussion model.
Lighthouse will flag a warning if <h1> is used without a specified font-size.
Sometimes it's a necessary evil (when you have to fix a security vulnerability), but here I really fail how it was necessary.