Hacker News new | past | comments | ask | show | jobs | submit login
HTML Periodic Table (websitesetup.org)
159 points by polymath_potato 7 months ago | hide | past | web | favorite | 47 comments



I 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)! Pictures of the periodic table and a detailed story here: 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.


It's amazing that people remember this! Alara actually filed a suit against me, and that's when I learned the difference between being right, and being right in the eyes of the law. It involves lots of money being thrown at lawyers.

On the plus side, I later got to meet Mike (the other Australian who she thought I was in cahoots with) and later rebuilt the table into https://allthetags.com/, which is a lot more colourful but a lot less punny (shake your phone to learn something new).


I guess this here is Mike's version. The best of the crop IMO

https://www.madebymike.com.au/demos/html5-periodic-table/


> that's when I learned the difference between being right, and being right in the eyes of the law

It sounds like there's an interesting story here. Care to elaborate more?


Alara was absolutely sure that I'd somehow colluded with her publisher to steal and republish an illustration from her as-yet unpublished book.

I obviously knew that I hadn't. But once she'd started the legal ball rolling I had to engage a lawyer and respond through the appropriate legal channels. My lawyer told me litigation (going to court) will generally cost tens of thousands of dollars. And in California recovering costs is far from guaranteed, you have to file a counter-suit I think, and prove the original case was frivolous.

Filing a case is not free - she'd already spent at least a few hundred dollars in court costs and possibly much more for lawyers to draft cease and resists and the actual case. Either it was all a bluff, or she truly believed I stole from her. The second option was scarier. When you're faced with someone who is absolutely sure that you're a bad person, and has invested a lot of time and money into chasing you, how do you convince them they're wrong?

Imagine being in Twitter fight with someone who you think is completely off the rails. And now imagine you aren't allowed to just ignore them or block them but are forced to assemble a body of proof and pay a lawyer to convince an independent third party of the truth.

Given this was a webpage that was not making any money (I had tried to sell posters, but never ended up seeing a cent) the cost and time were not worth it.

Mike Riethmuller was the other guy she accused of theft. He managed to find a journalist to cover the issue, and that worked out much better for him! Not living in California also made him harder for her to chase down.


My goodness, that story is truly incredible.

This Alara Mills is an utterly reprehensible character, and her comments are astounding.

> I find it very suspicious that Josh Duck and Mike Riethmuller are both from Australia but claiming not to know each-other

…WHAT?! Australia is a country of 25 MILLION people! We don't all know each other!

She seems to have disappeared from the Internet, or now identifies as a jazz vocalist of some sort. If it's the same person, she seems(?) to have photoshopped her face onto the body of another woman[0]. Maybe I'm wrong about that, but if I'm not, is that also possibly illegal?

[0]: https://www.alara5star.com/

Oh my god it keeps getting better[1]

> The artist is inspired by the likes of Whitney Houston, Toni Braxton, and Anita Baker, to name but a few. AlarA’s vocal skills and enthusiasm for music easily puts her on par with these powerhouse vocalists.

She compares herself to Whitney Houston!

[1]: https://www.alara5star.com/about/


The problem is that this one isn't periodic. That word describes how things in columns (eg with the same mathematical period) have the same properties. Without that feature it's just a table.


Agreed, but there seems to be a reasonable explanation, so I'm not about to start complaining.

Plus it's described on the website as a periodical table, so I'm not even convinced the author is claiming it to be a periodic table.


I think this website violates my patent, "A process to display tabular data to users, but on a computer".



Wow. 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.


I never could have imagined there was so much more to this story. Thank you for the article!


This story has a very deep rabbit hole... wondering if anyone else can confirm this -- I followed the links and it appears that the claimant just released an album? https://www.amazon.com/Love-Manifesto-ALara/dp/B07NDCHMQ9


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.

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.


> 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/periodi...


It'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.


Maybe I’m just a little foggy this morning, but what is periodic about this table?


Exactly my thoughts. Just call it a table.


Absolutely nothing.


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.

Smaller detail: the the bottom groups buttons would feel more interactive as mouseovers -- and more consistent with the elements cases.


It 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.


I 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.


I don't understand how this table is periodic. Could someone fill me in?


I also don't understand this. The boxes don't seem to be organised in any logical way, they just spell HTML?


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].

[1]: https://html.spec.whatwg.org/multipage/#toc-semantics


Too many shades of blue. Almost impossible to map the squares to the "middle colors" of the legend.


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 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xm...

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.

[1]: http://sgmljs.net/docs/w3c-html51-dtd.html


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.


Dear scientists, please can the Periodic Table of Elements be restructured to spell out CHEMISTRY. Thanks.


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.

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.


Neither a <table> , nor clean HTML (doesn't work without JS)

Great idea, though!


Nothing periodic about this and could have used more distinct colors for this simple table.


All similar tags are color coded, so why not group them together? This is simply nonsensical...


I thought HTML was just <div> <div> <div> <div> <div> <div>


It 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?


Well, you asked. Critique me I guess.

https://wescook.ca/

Source: https://github.com/WesCook/wescook.github.io


Top marks!

I only tested two pages - didn't read them - but your element vocabulary is excellent. I learned about 'dark mode' and how to do it properly.

Bravo!


Hooray! Thanks!


It’s small and short, but 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


Getting 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!


People think that the <div> tag is a meaningless generic block-level element — that's pretty much how it's described in the HTML 4 and 5 specs.

In fact it was introduced in HTML 3.0 as "The DIV element is used with the CLASS attribute to represent different kinds of containers, e.g. chapter, section, abstract, or appendix." [1]

It was retained in HTML 3.2 as "DIV elements can be used to structure HTML documents as a hierarchy of divisions" [2], making it equivalent to the current <header>, <footer> and <section> tags.

1. https://www.w3.org/MarkUp/html3/divisions.html

2. https://www.w3.org/TR/2018/SPSD-html32-20180315/#div


What is the periodic in this table? Which properties of the HTML tags repeat in every row?


menu and menu-item are Firefox-only https://caniuse.com/#search=contextmenu


`<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/me...

[2]: https://html.spec.whatwg.org/multipage/grouping-content.html...




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: