Periodic Table of the HTML Elements

by cdl • 13 years ago

105 27 13 years ago

jloughry3• 13 years ago

The author put some thought into arranging elements according to their relationships, something too often overlooked in 'periodic table of $x$' mash-ups.

The more I look, the more I find. I am impressed.

cdl• 13 years ago

Ditto, the arrangement and group colors make this a very navigable space.

TheBiv• 13 years ago

As a biology and genetics grad, I can safely say that I never memorized the periodic table, but this looks like something I can commit to memory! Awesome, awesome work!

aroch• 13 years ago

I memorized it (well, ~85% of it) in 6th grade for an extra credit quiz. As a bonus, if we got all of it right, we got to be the ones to drop the matches into our experimental gases (H2O2 to make Hydrogen, Helium from balloons, etc). Needless to say, 6th grade me was more than willing to memorize things for the chance to use fire.

I still have most of the table memorized, which has been useful through various biology and OChem courses and my research

jneal• 13 years ago

I've seen periodic tables like this in the past that were just, blah...But I still reluctantly clicked through and was amazed. This is beautiful and organized very well. I find myself clicking through various newer HTML5 elements I've never used.

jloughry3• 13 years ago

It gives you something like a heat map of any web page. Cool! I keep finding little surprises hidden here.

dnautics4• 13 years ago

what's periodic about it? Isn't it just a table?

hga• 13 years ago

http://en.wikipedia.org/wiki/Periodic_table

The original is very useful in chemistry. E.g. going right from carbon, which can make 4 bonds, nitrogen can make 3, oxygen 2, florine 1. Going down from oxygen, sulfur is a heavy oxygen that can make many of the same compounds, with we understand to be different from its weight and greater number of electrons.

jloughry3• 13 years ago

In the periodic table of (chemistry) elements, there are all sorts of patterns. Metals all cluster together. The noble gases (elements that don't react with much of anything) all live over on the right hand side in one column. Corrosive things like oxygen, chlorine, fluorine, etc. appear vertically above one another. The element right below a given place in the table most often has properties very similar to the one above it (but probably more so). The number of columns in the table has a specific meaning.

Most significantly for chemistry, when the structure of the table was first figured out, it was full of obvious empty slots. Those predicted the existence of previously unknown elements, all of which were subsequently discovered. We are still filling in the bottom row...Element 115 just this week, in fact. Are there more rows in the periodic table? Maybe---if the proposed "island of stability" exists: http://en.wikipedia.org/wiki/Island_of_stability

phaedryx2• 13 years ago

I had the same question.

(Also, I realize that you're asking about the linked HTML periodic table, not the periodic table of elements.)

dnautics4• 13 years ago

Thanks =) I guess I should be a bit more careful with dangling pronoun references.

stared2• 13 years ago

Please, don't use periodic table to visualize anything by elements. For elements it works great and is one of the most beautiful and useful visualization ever created (as it's form is related to fundamental relation between elements).

For everything else (unless having a similar structure to elements), it's awful, misleading and pointless. If I see such I am always wondering, is it: a tasteless designer, wannabe data scientist who know no other visualizations, or a science ignorant having no clue why Mendeleev's table is structured in that particular way, or a salesman wanting to give it extra legit and make it sound more fundamental.

Just please, don't.

Hint: just group things, in their own structure.

mden2• 13 years ago

It's just a way to visualize information. I find this interesting to look at and also well organized (personally love the color coding and the asymmetry).

In either case, no reason to be negative. If you don't like it, don't use it. If you are commenting to critique, no reason to be a jerk.

stared2• 13 years ago

Color code is nice here. I appreciate the gathered information.

But I am criticising visualizing using things such as periodic tables (were columns, rows and gaps have a particular meaning) for visualization for which they don't fit. Since it is not the first time I see such.

May point is not to use this particular visualization or not, but to make people thinking for a few seconds before starting visualizing: "Does the structure of this visualization fit the purpose? Or is it more like hammering nails with an iPhone?" (you can != you should).

paxswill• 13 years ago

The periodic table isn't just a nice layout of information, the position of each element in the table provides further information about it. For example, we know gold (Au) is pretty a pretty good conductor of electricity. By looking at the other elements in its group (the column), we can guess that copper (Cu) and silver (Ag) are also good electrical conductors (in fact, some of the best).

Beyond that simple case, there are loads of other bits of information encoded in the position. The image on the Wikipedia article gives a good overview of some of the trends.

http://en.wikipedia.org/wiki/Periodic_table#Periodic_trends

dnautics4• 13 years ago

agreed. This is good, though: http://www.plosone.org/article/info:doi/10.1371/journal.pone...

(note that the word "periodic" is used correctly, and the structure of the table winds up not looking like the periodic table of the elements)

Karellen• 13 years ago

I think you could do a periodic table of html elements, but the author hasn't done it here - at least not the "periodic" part.

For instance, I'd expect "head" and "body" to be in one period, and "thead" and "tbody" in the same groups of a different period. That could put "table" in the same group as "html", with them both being "container" periods. (with "iframe" being in the same group as "html"/"table"?) "fieldset" looks like it should fit in there somewhere also, possibly with "legend" being an equivalent to "title".

Then you'd have periods like "block elements" and "inline elements", with e.g. "blockquote" and "q" being in the same group for each. Ditto "div" and "span" - which I think should be in the same group ("overly generic elements"?), not in the same period as the author has them.

Similarly, "dl", "ul" and "ol" are 3 list periods, with "dd", "li" and ... "li" in the next group - where "li" being a repeated element is an interesting bit of information you could extract from such a table.

Note that I missed "dt" in the list elements periods above, but then there's a similarity between the "dl", "dt", "dd" period, and a possible "tr", "th", "td" period.

TheZenPsycho• 13 years ago

You are really making me want to do this. I liked the colored groups- that's actually useful information, disregarding its superficial similarity to the "real" periodic table of elements. It would be interesting to see a table that does a good job of grouping along other attributes like you've described here.

It pretty well falls along the lines of what I once wrote about- that HTML should be split into multiple, mutually exclusive sub-languages- with guarded sections of code that does not permit tags from any other groups to be interpreted as actual tags, as enforced by the browser. If browsers had this ability: to whitelist certain tags, imagine how many XSS attacks we could avoid, by having a special container in which script and style tags (and any other tags or attributes that cause the evaluation of code) strictly do not and cannot work.

OH well.

coderzach• 13 years ago

I think you may be taking it too seriously.

saraid216• 13 years ago

Are you saying that the OP's only value is humor?

pessimizer• 13 years ago

I can't figure out what relationships this is supposed to be showing me, other than the color labeling a particular type of element according to the key on the bottom.

Why is it 18 columns wide? Why the asymmetry? What does it mean for an element to be on top of another?

I'm clicking around and I'm not seeing it.

tantalor• 13 years ago

The arrangement could be improved in a few places,

1. i and em, and b and strong, should be related. They should appear in two column? e.g., i over em, b over strong

2. The most common form elements (input, select, textarea, button) should be near the top. select should be directly over option.

mistercow• 13 years ago

That's pretty cute. I was kind of hoping that singletons would be over on the far right in the "noble gases" column, as an analogy to reactivity, or perhaps some other analogy about nesting relationships.

pattle• 13 years ago

I get "Error establishing a database connection" in big letters when I try to visit your blog

Periodic Table of the HTML Elements

Related Stories