On day 1 of the #HTMHellAdventCalendar @5t3ph describes an accessibility issue that can arise when you use popovers and dialogs together. #HTMHellAdventCalendar

https://htmhell.dev/adventcalendar/2025/1/

Top layer troubles: popover vs. dialog - HTMHell

A collection of bad practices in HTML, copied from real websites.

Top layer troubles: popover vs. dialog - HTMHell

On day 2 @boldewyn reminds us of a hellish deprecated element in HTML: `<plaintext>` #HTMHellAdventCalendar

https://htmhell.dev/adventcalendar/2025/2/

Using the Ancient Evils for Debugging - HTMHell

A collection of bad practices in HTML, copied from real websites.

Using the Ancient Evils for Debugging - HTMHell

On day 3 @tunetheweb introduces us to Speculation Rules and recent improvements to the API that help us speed up our websites. #HTMHellAdventCalendar

https://htmhell.dev/adventcalendar/2025/3/

Speculation rules improvements - HTMHell

A collection of bad practices in HTML, copied from real websites.

Speculation rules improvements - HTMHell

On day 4 @mehm8128 introduces us two future solutions for creating cross-root references. #htmHellAdventCalendar

https://htmhell.dev/adventcalendar/2025/4/

Referencing HTML elements inside Shadow DOM - HTMHell

A collection of bad practices in HTML, copied from real websites.

Referencing HTML elements inside Shadow DOM - HTMHell
IDREFs: What they are and how to use them - HTMHell

A collection of bad practices in HTML, copied from real websites.

IDREFs: What they are and how to use them - HTMHell

On day 6 @colabottles reminds us how powerful the lang attribute is #HTMHellAdventCalendar

https://htmhell.dev/adventcalendar/2025/6

Accessible by Design: The Role of the 'lang' Attribute - HTMHell

A collection of bad practices in HTML, copied from real websites.

Accessible by Design: The Role of the 'lang' Attribute - HTMHell
Controlling dialogs and popovers with the Invoker Commands API - HTMHell

A collection of bad practices in HTML, copied from real websites.

Controlling dialogs and popovers with the Invoker Commands API - HTMHell

On day 8 @patrickbrosset illustrates how the fact that HTML is so forgiving can be a blessing and a curse. #htmhellAdventCalendar

https://htmhell.dev/adventcalendar/2025/8/

What's wrong with this HTML, and is it valid? - HTMHell

A collection of bad practices in HTML, copied from real websites.

What's wrong with this HTML, and is it valid? - HTMHell
Discover Dialog - HTMHell

A collection of bad practices in HTML, copied from real websites.

Discover Dialog - HTMHell

On day 10 @SteveFaulkner revisits the 1st rule of ARIA, which he originally formulated, and there's also something about beavers…I think. #HTMHellAdventcalendar

https://htmhell.dev/adventcalendar/2025/10/

a11y freedom beaver - HTMHell

A collection of bad practices in HTML, copied from real websites.

a11y freedom beaver - HTMHell

On day 11 @robinwhittleton shares what he knows about HTML for ePub. #htmHellAdventcalendar

https://htmhell.dev/adventcalendar/2025/11/

How HTML changes in ePub - HTMHell

A collection of bad practices in HTML, copied from real websites.

How HTML changes in ePub - HTMHell

On day 12 Manuel Sanchez lists things we need to consider when using Math on the web. #HTMHellAdventcalendar

https://htmhell.dev/adventcalendar/2025/12/?m

A11y Considerations in Math on the Web - HTMHell

A collection of bad practices in HTML, copied from real websites.

A11y Considerations in Math on the Web - HTMHell

On day 13 @lloydi presents one of my favourite debugging tools. #htmHellAdventcalendar

https://htmhell.dev/adventcalendar/2025/13/

Hell is other people's markup - HTMHell

A collection of bad practices in HTML, copied from real websites.

Hell is other people's markup - HTMHell
The Wonderful World of Web Feeds - HTMHell

A collection of bad practices in HTML, copied from real websites.

The Wonderful World of Web Feeds - HTMHell

On day 15 @tylersticka shows us how to break the web‽

https://htmhell.dev/adventcalendar/2025/15/

Them’s the Breaks - HTMHell

A collection of bad practices in HTML, copied from real websites.

Them’s the Breaks - HTMHell

On day 16 Steve Barnett helps you create sound document outlines. #htmhellAdventcalendar

https://htmhell.dev/adventcalendar/2025/16/

Giving pages a clear shape by using headings - HTMHell

A collection of bad practices in HTML, copied from real websites.

Giving pages a clear shape by using headings - HTMHell

On day 17 @gerireid explores the gap between what's rendered on the screen and what screen readers actually announce. #htmhellAdventcalendar

https://htmhell.dev/adventcalendar/2025/17/

Don't leave the screen reader hungry - HTMHell

A collection of bad practices in HTML, copied from real websites.

Don't leave the screen reader hungry - HTMHell

On day 18, @jensgro shares his opinion about the state of native form elements in HTML. #htmhellAdventCalendar

https://htmhell.dev/adventcalendar/2025/18/

Forms are a badly designed part of HTML - HTMHell

A collection of bad practices in HTML, copied from real websites.

Forms are a badly designed part of HTML - HTMHell

On day 19 @knowler shares his experience with divitis, a highly contagious disease. #htmhellAdventcalendar

https://htmhell.dev/adventcalendar/2025/19/

Semantics beyond the tag name - HTMHell

A collection of bad practices in HTML, copied from real websites.

Semantics beyond the tag name - HTMHell

On day 20, @katrin_k talks about the usefulness and potential of the title element. #htmhellAdventcalendar

https://htmhell.dev/adventcalendar/2025/20/

The many lives of the page title - HTMHell

A collection of bad practices in HTML, copied from real websites.

The many lives of the page title - HTMHell

On day 21 Julia Undeutsch shows us how to use the lang attribute for multilingual design. #htmhellAdventCalendar

https://htmhell.dev/adventcalendar/2025/21

Styling by Language: Using the lang Attribute for Multilingual Design - HTMHell

A collection of bad practices in HTML, copied from real websites.

Styling by Language: Using the lang Attribute for Multilingual Design - HTMHell

On day 22 @vale.rocks takes us down memory lane. #HTMHellAdventCalendar

https://htmhell.dev/adventcalendar/2025/22/

The HTML Elements Time Forgot - HTMHell

A collection of bad practices in HTML, copied from real websites.

The HTML Elements Time Forgot - HTMHell

On day 23 @developerjustin shows some love for the <details> element. #htmHellAdventCalendar

https://htmhell.dev/adventcalendar/2025/23/

For the Love of <details> - HTMHell

A collection of bad practices in HTML, copied from real websites.

For the Love of <details> - HTMHell
@matuzo Yay!! Thank you again for including the piece!!

@developerjustin @matuzo I enjoyed that, Justin!

Similar to your table of contents example and TL;DR example, I experimented a few years ago with using a `details` element for the entire contents of a webpage. I think it works well but it might not be self-evident enough to work for every user.
https://alandalton.github.io/TheArtOfWarBySunTzu/

“The Art Of War” by Sun Tzu

The Art Of War

@Alan @matuzo Thank you!!

This is actually a really cool use case. It’s all still searchable and the presentation feels like an interactive ebook.