{"id":4732,"date":"2025-01-06T10:42:42","date_gmt":"2025-01-06T15:42:42","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4732"},"modified":"2025-01-07T11:40:42","modified_gmt":"2025-01-07T16:40:42","slug":"bone-up-html-2025","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/bone-up-html-2025\/","title":{"rendered":"Relatively New Things You Should Know about HTML Heading Into 2025"},"content":{"rendered":"\n

Not all of this is like absolutely brand spanking new<\/em> just-dropped-in-2024 stuff. Some of it is, but generally it’s relatively<\/em> new stuff that’s all pretty great. I’m pointing things out that I think are really worth knowing about. It’s possible you haven’t kept up too much with HTML developments as it tends to, rightfully, move a lot slower than CSS or JavaScript. <\/p>\n\n\n\n

A group of details elements can behave like an accordion, among other improvements, but still have accessibility limitations.<\/h2>\n\n\n\n

We’ve had cross-browser <details><\/code> \/ <summary><\/code> support since 2016, but only recently have the abilities started to expand and clean up. <\/p>\n\n\n\n

For one, you can make an “exclusive” accordion by grouping them together via the name<\/code> attribute:<\/p>\n\n\n

<details<\/span> name<\/span>=\"group\"<\/span>><\/span><summary<\/span>><\/span>One<\/summary<\/span>><\/span> ... <\/details<\/span>><\/span>\n<details<\/span> name<\/span>=\"group\"<\/span>><\/span><summary<\/span>><\/span>At<\/summary<\/span>><\/span> ... <\/details<\/span>><\/span>\n<details<\/span> name<\/span>=\"group\"<\/span>><\/span><summary<\/span>><\/span>A<\/summary<\/span>><\/span> ... <\/details<\/span>><\/span>\n<details<\/span> name<\/span>=\"group\"<\/span>><\/span><summary<\/span>><\/span>Time<\/summary<\/span>><\/span> ... <\/details<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Me, I mostly think the only-one-open-at-a-time thing is an anti-pattern (as do others<\/a>), mostly because it’s weird to close something a user may have intentionally opened via side effect. But the web is a big place and certain specific designs I can see needing it to be effective so I don’t hate that it exists. At least I think using the term “accordion”<\/a> is now appropriate in this context, but that there are still potential accessibility issues. Like imagine using this for a FAQ section where each question would normally be a header like <h3><\/code>, well, the semantics of that <h3><\/code> is wiped out by the <summary><\/code>, which is a “button”, so that’s not great.<\/p>\n\n\n\n
Here’s an example of the accordion pattern being used with a group of horizontally laid out details elements. If more could be opened, it could cause horizontal scroll which I sure we can all imagine also sucks.<\/p>\n\n\n\n