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"
- Details is a semantic tag that should keep its meaning irrespective of layout. Hamburger is usually mobile-only, i.e. responsive / presentation territory.
- 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.
- 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.