<details>  
  <summary class="video-summary">
    <!-- Video Placeholder Image -->
    <img src="https://lab.n8d.studio/htwoo/htwoo-core/images/videos/big-bug-bunny.webp" class="video-thumbnail">
    <!-- Play Button -->
    <svg class="video-playicon" data-id="icon-play-filled" viewBox="0 0 32 32" data-icontype="filled"><path d="m11.167 5.608 16.278 8.47a2.169 2.169 0 0 1 .011 3.838l-.012.006-16.278 8.47a2.167 2.167 0 0 1-3.167-1.922V7.529a2.167 2.167 0 0 1 3.047-1.981l-.014-.005.134.065z"></path></svg>
  </summary>

  <!-- we'll get here... -->
</details>

When a visitor decides to watch the video and clicks on the thumbnail, the open attribute will be placed by the browser on the details attribute, which means the video summary can be hidden.

1. unsystematic
2. valid
3. semantic
4. Accessible
5. Required-only
6. hyper-optimized

a thing you absolutely cannot do is nest one interactive control inside another

it has few examples.

Shadcn makes the radio button overly complex, even if <input type="radio" name="beverage" value="coffee" /> with 30 lines of CSS is enough.
The library uses 3 imports (and 2 components) and 45 lines of code and ARIA.

Text rotating at the borders of an image

Use cases for HTML only:

• Accordions
• input with Autofilter suggestions dropdown (<datalist>)
• modals / popover with popover and popovertarget

Selon le besoin ou une question, le service propose un tag HTML dédié: button, a, output,. ...

The website author is available in different format than HTMLz

The contrary of HTMLHell, a page full of tips: HTML Heaven.

Documents will be available in HTML!

Lessons from maintaining an open source tool:

1. Simplicity is a feature
2. Real users reveal problems
3. open source is a marathon

Yet through all these changes, the need for efficient HTML delivery remains constant. That's perhaps the most interesting lesson: fundamental problems persist even as technologies evolve.

An example of semantic class names and a teaser on server of Kelp to have dynamic HTML through WebComponents.

Not read yet.

It was one of those moments where something you once knew suddenly clicks again with fresh significance. Here was a URL doing far more than just pointing to a page. It was storing state, encoding intent, and making my entire setup shareable and recoverable. No database. No cookies. No localStorage. Just a URL.

Good candidates for URL state:

• Search queries and filters
• Pagination and sorting
• View modes (list/grid, dark/light)
• Date ranges and time periods
• Selected items or active tabs
• UI configuration that affects content
• Feature flags and A/B test variants --> I never though about this one

Anti-Patterns to avoid:

• state only in memory SPAs
• sensitive Data in URLs
• inconsistent or opaque naming
• overloading URLs with complex state
• breaking the back button

Another post about semantic HTML, or the UX of HTML with <button>

The content is similar to The HTML Output Element from Matthias Ott or HTML’s Best Kept Secret: The

Tag — Den Odell

.

They advocate for better usage of <output> instead of aria attributes. Let's use native instead of ARIA!

Under accessibility, but this tag should be the norm

<output> is currently underused in so many SPAs and apps, because it announces