I have a hunch as to why this table isn't anything like the periodic table of elements.<p>For those that don't know, a long time ago Josh Duck built an HTML Periodic Table that actually resembled the periodic table. It got taken down, because someone else made another HTML Periodic Table (with clearly different organization and a very different look), and then she claimed that Josh Duck's very different periodic table was infringing on her copyright. She even went as far as to claim that he somehow even intercepted her emails to steal her ideas, and even alleged that Josh Duck and another guy who made a similar HTML Periodic Table were in kahoots because they were in the same country (Source: <a href="https://i.imgur.com/sthuEd8.png" rel="nofollow">https://i.imgur.com/sthuEd8.png</a>)! Pictures of the periodic table and a detailed story here: <a href="https://www.techdirt.com/articles/20150417/08423730696/designer-issues-takedown-cease-desist-over-periodic-table-html5-elements.shtml" rel="nofollow">https://www.techdirt.com/articles/20150417/08423730696/desig...</a><p>By making this table look nothing like the periodic table of elements (or like the ones that people were sued over), I think the creator should be able to avoid being sued by anyone trying to make a quick buck.
The periodic table of the elements is useful because it brings similar elements together. A chemist that knows nothing about an element except its position on the periodic table can predict many of its properties based on the surrounding entries of the table.<p>In fact, if I recall correctly, a major reason Mendeleev is generally the name we associate most with invention of the periodic table of the elements, even though others had tried to organized the elements into tables beforehand, is that Mendeleev was the first to leave gaps in his table when the next known element fit in better somewhere else, and to predict that unknown elements would fill those gaps, and to successfully predict their properties.<p>I don't see that in this HTML periodic table, or in Josh Duck's table mentioned as the inspiration for the idea.
This is a good idea, but I feel like it would benefit by forgoing the "HTML" art layout, and being more similar to the actual periodic table, by organizing elements in groups on the X axis and in introduction year/version on the Y axis.<p>Smaller detail: the the bottom groups buttons would feel more interactive as mouseovers -- and more consistent with the elements cases.
It is missing a few elements that were added relatively recently (like `<picture>` and `<dialog>`). I also find it a bit strange that the categorization comes from somewhere else then the WHATWG living standard[1].<p>[1]: <a href="https://html.spec.whatwg.org/multipage/#toc-semantics" rel="nofollow">https://html.spec.whatwg.org/multipage/#toc-semantics</a>
Nice concept. Though, is it a table anymore if it's responsive? Maybe allow horizontal scrolling in smaller viewports b/c on smaller screens looks like an unordered list of html elements
Missing the <xmp> element. I know it's depreciated but it is still supported in every browser according to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xm...</a><p>It comes in handy for debugging.
There are many HTML quick references on the 'net. Mine [1] lists the normative reference text (from W3C's HTML spec) along with a transcription into SGML DTD grammar rules.<p>[1]: <a href="http://sgmljs.net/docs/w3c-html51-dtd.html" rel="nofollow">http://sgmljs.net/docs/w3c-html51-dtd.html</a>
As a web developer, I'm always surprised by the lack of HTML knowledge by most web developers (including myself). Sometimes we spend a long time developing a component when there is a perfectly good HTML tag with better a11y and i18n support available.
I like the idea of memorizing HTML elements by their position in the table. But color coding might be more distinctive, not just a shades of one color.<p>Also why the group is highlighted when an element is hovered, but not the other way around?
It would be nice to have a coherent overview of the elements but the placement of the headings in this table suggests the author doesn't try to combine different criteria like the periodic table of element does.
menu and menu-item are Firefox-only <a href="https://caniuse.com/#search=contextmenu" rel="nofollow">https://caniuse.com/#search=contextmenu</a>