
HTML Periodic Table - polymath_potato
https://websitesetup.org/html5-periodical-table/
======
jamescostian
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](https://i.imgur.com/sthuEd8.png))! Pictures
of the periodic table and a detailed story here:
[https://www.techdirt.com/articles/20150417/08423730696/desig...](https://www.techdirt.com/articles/20150417/08423730696/designer-
issues-takedown-cease-desist-over-periodic-table-html5-elements.shtml)

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.

~~~
underwater
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/](https://allthetags.com/), which is a lot more
colourful but a lot less punny (shake your phone to learn something new).

~~~
kbirkeland
> 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?

~~~
underwater
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.

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

~~~
KineticLensman
> 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...](https://stratos.seas.harvard.edu/files/stratos/files/periodictabledatastructures.pdf)

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

~~~
phaedryx
Exactly my thoughts. Just call it a table.

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

~~~
test6554
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.

~~~
tarikjn
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.

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

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

------
runarberg
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](https://html.spec.whatwg.org/multipage/#toc-semantics)

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

------
_Chief
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

------
kingkool68
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...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/xmp)

It comes in handy for debugging.

------
tannhaeuser
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](http://sgmljs.net/docs/w3c-html51-dtd.html)

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

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

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

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

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

Great idea, though!

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

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

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

~~~
Theodores
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?

~~~
SquareWheel
Well, you asked. Critique me I guess.

[https://wescook.ca/](https://wescook.ca/)

Source:
[https://github.com/WesCook/wescook.github.io](https://github.com/WesCook/wescook.github.io)

~~~
Theodores
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!

~~~
SquareWheel
Hooray! Thanks!

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

------
aboutruby
menu and menu-item are Firefox-only
[https://caniuse.com/#search=contextmenu](https://caniuse.com/#search=contextmenu)

~~~
runarberg
`<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...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/menuitem)

[2]: [https://html.spec.whatwg.org/multipage/grouping-
content.html...](https://html.spec.whatwg.org/multipage/grouping-
content.html#the-menu-element)

