7 ms·
HTML Periodic Table
- rlue 8y agoMaybe I’m just a little foggy this morning, but what is periodic about this table?
- tarikjn 8y agoThis 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. Smaller detail: the the bottom groups buttons would feel more interactive as mouseovers -- and more consistent with the elements cases.
- test6554 8y agoIt seems to me that the best thing would be to publish a relational database with each element, the type of content, whether the closing tag can be omitted, a list of allowed attributes, a list of disallowed attributes, when it was introduced, what parent elements are allowed, what child elements are allowed, etc. And let the community go to town.
- tarikjn 8y agoI can't tell if this is a sarcastic comment, because this is exactly what the specs provide. You can parse it and get all that.
- forgotmypw 8y agoNeither a <table> , nor clean HTML (doesn't work without JS) Great idea, though!
- aboutruby 8y agomenu and menu-item are Firefox-only https://caniuse.com/#search=contextmenu https://caniuse.com/#search=contextmenu
- runarberg 8y ago`<menuitem>` is pretty much deprecated[1]. However, `<menu>` should work consistently across browsers (at least at a basic level) since it is just a list container (like `<ol>`, and `<ul>`) representing a list of items to be acted on[2]. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me... [2]: https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element https://html.spec.whatwg.org/multipage/grouping-content.html...
- kingkool68 8y agoMissing the <xmp> element. I know it's depreciated but it is still supported in every browser according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xm... It comes in handy for debugging.
- _Chief 8y agoNice 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
- everfree 8y agoI don't understand how this table is periodic. Could someone fill me in?
- jujulet 8y agoI also don't understand this. The boxes don't seem to be organised in any logical way, they just spell HTML?
- jamescostian 8y agoI have a hunch as to why this table isn't anything like the periodic table of elements. 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: https://i.imgur.com/sthuEd8.png https://i.imgur.com/sthuEd8.png)! Pictures of the periodic table and a detailed story here: https://www.techdirt.com/articles/20150417/08423730696/designer-issues-takedown-cease-desist-over-periodic-table-html5-elements.shtml https://www.techdirt.com/articles/20150417/08423730696/desig... 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.
- polymath_potato 8y agoI never could have imagined there was so much more to this story. Thank you for the article!
- WrtCdEvrydy 8y agoWhat a fucking weirdo ... 'I own the Periodic Table and HTML... pay me!'
- labster 8y agoI think this website violates my patent, "A process to display tabular data to users, but on a computer".
- avip 8y agoWow. What a plot twists. I was expecting something like "The periodic table has inner logic and structure based on profound lows of our universe, while html is a random pile of crap made by fools like us". Instead, I got a much more interesting explanation.
- octocode 8y agoI thought HTML was just <div> <div> <div> <div> <div> <div>
- Theodores 8y agoIt is! With a few span elements and icons in i elements! The joke is that there are articles from a decade ago talking about the end of everything being a div and the new markup taking over. It never happened. Instead we got the frameworks that double down on divs. Then the website builder things that take div nesting to another level. Seriously if anyone on this site has a website created the proper way with accessible elements using a decent amount of vocabulary then I would like to know. It does not matter what the site looks like, or what it is about, I just want to find some websites that use rather than talk about proper element use. I don't see what mankind's problem is - why do we adopt plenty of complicated web technology things and yet nobody can be bothered to structure a document?
- MaxLeiter 8y agoIt’s small and short, but https://github.com/MaxLeiter/maxleiter.github.io/blob/master/index.html https://github.com/MaxLeiter/maxleiter.github.io/blob/master... was my first time exploring elements like aside and article rather than using div in their place
- Theodores 8y agoGetting there... IMHO you need to ditch the wrapper divs and put a single 'main' in there. Then you need to apply CSS Grid to the outer container with something sensible for the outer rows to do the wrapper thing more succinctly. Also get rid of the div around the footer. There are also a few spans too many around the links at the start of each article, if you can do things with pseudo elements instead then I think you will like it that way - moving presentational stuff out the document into the stylesheet. Also be bold with the classes. If you are using elements instead of divs then you can style them without the class tags. Don't take these points as criticisms, there is a lot to unlearn with CSS grid and using proper elements instead of the usual divs. I don't think you need the armbands any more, it is good to see!
- runarberg 8y agoIt 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]. [1]: https://html.spec.whatwg.org/multipage/#toc-semantics https://html.spec.whatwg.org/multipage/#toc-semantics
- ComodoHacker 8y agoI 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. Also why the group is highlighted when an element is hovered, but not the other way around?
- tzs 8y agoThe 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. 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. I don't see that in this HTML periodic table, or in Josh Duck's table mentioned as the inspiration for the idea.
- KineticLensman 8y ago> 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 Yes. This is a really powerful concept. By way of example, here a periodic table of data structures [0] that I think has been on HN before. The authors show that there are gaps in the arrangement they've developed, and thus predict types of data structure that haven't yet been researched. [0] https://stratos.seas.harvard.edu/files/stratos/files/periodictabledatastructures.pdf https://stratos.seas.harvard.edu/files/stratos/files/periodi...
- perilunar 8y agoIt's a cute play on 'table', which historically has been badly abused in HTML, and 'elements', which in HTML generally means the tag plus the contents. Other than that it's pointless. As you say it has no predictive use, and it's not much use as a mnemonic device either.
- hanniabu 8y agoAll similar tags are color coded, so why not group them together? This is simply nonsensical...
- neatcoder 8y agoWhat is the periodic in this table? Which properties of the HTML tags repeat in every row?
- cvsguimaraes 8y agoIt 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.
- g105b 8y agoDear scientists, please can the Periodic Table of Elements be restructured to spell out CHEMISTRY. Thanks.
- tannhaeuser 8y agoThere 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. [1]: http://sgmljs.net/docs/w3c-html51-dtd.html http://sgmljs.net/docs/w3c-html51-dtd.html
- zvrba 8y agoToo many shades of blue. Almost impossible to map the squares to the "middle colors" of the legend.
- miguelmota 8y agoNothing periodic about this and could have used more distinct colors for this simple table.
- wintorez 8y agoAs 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.