Why <details> html tag is not used as hamburger menu?

I have never seen this but it looks like a perfect fit for <details>.

Is this bad for SEO or why it's not used? <details> already works as a hamburger without javascript and its global support is 96.6% on https://caniuse.com/?search=details.

Have you thought about this option?


There are several ways to do this, you can have only <details>, or <details> and a standard <nav> and toggle display: none; based on media query. Should <details> have a <nav> inside it or outside?


Solution 1:

Update: TL:DR; Because it doesn't "make sense"

  1. Details is a semantic tag that should keep its meaning irrespective of layout. Hamburger is usually mobile-only, i.e. responsive / presentation territory.
  2. Same reasoning goes for accessibility – if it's less than important, it should be that way all the time. Even if details become "open" on the desktop via styling, they'd still be "details" in a screen reader.
  3. Browsers give it default styling that's arguably not so easily overridden.

Edit: And to the point – I'd say it does nothing whatsoever to your SEO, bad or good.